質問編集履歴

6

訂正

2022/06/20 10:23

投稿

tetucame
tetucame

score1

test CHANGED
File without changes
test CHANGED
@@ -49,8 +49,6 @@
49
49
  temp.innerHTML = `<td>${this.en}</td><td>${this.ja}</td><td><button class="btn">削除</button></td>`;
50
50
  const btn = temp.content.querySelector('.btn');
51
51
  btn.addEventListener('click', e => {
52
- // localStorage.removeItem(words[i][0]);
53
- // localStorage.removeItem(words[i][1]);
54
52
  if (window.confirm('本当に削除しますか?')) {
55
53
  let parent = e.target.closest('tr');
56
54
  parent.remove();

5

html追加

2022/06/20 10:22

投稿

tetucame
tetucame

score1

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,37 @@
1
+ ```html
2
+ <!DOCTYPE html>
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <script src=""></script>
6
+ </head>
7
+ <body>
8
+ <input type="text" readonly="readonly" size="3" value="" id="q_cnt"><br>
9
+ <input type="text" readonly="readonly" size="6" value="日本語:" id="jn_q" >
10
+ <input type="text" readonly="readonly" size="20" value="" id="one_q"><br>
11
+ [<a href="javascript:void(0);" onClick="switch_jn();"> ↑↓ </a>]<br>
12
+ <input type="text" readonly="readonly" size="6" value="英語:" id="jn_a" >
13
+ <input type="text" readonly="readonly" size="20" value="" id="one_a"><br>
14
+ <br>
15
+ <a href="javascript:void(0);" onClick="prev_btn();" class="bottum"> BACK </a>/<a href="javascript:void(0);" onClick="next_btn();"class="bottum"> NEXT </a><br>
16
+
17
+
18
+ <!--保存-->
19
+ <input type="text" id="en" placeholder="単語">
20
+ <input type="text" id="ja" placeholder="意味">
21
+ <button id="btn">登録</button>
22
+ <p id="total">全0件</p>
23
+ <table id="table"></table>
24
+
25
+
26
+
27
+ <footer>
28
+ <p class="bottom"><a href="https://cms-web1.educ.chs.nihon-u.ac.jp/cgi-bin/Login.cgi" target="_blank">template by myrtilles.</a></p>
29
+ </footer>
30
+ </body>
31
+ </html>
32
+
33
+ ```
1
- ```6/20訂正版
34
+ ```js(6/20訂正版)
2
35
  window.onload = function () {
3
36
  counter_view();
4
37
  const en=document.getElementById('en');

4

コード訂正

2022/06/20 10:20

投稿

tetucame
tetucame

score1

test CHANGED
File without changes
test CHANGED
@@ -1,11 +1,40 @@
1
- ```6/16訂正版
1
+ ```6/20訂正版
2
2
  window.onload = function () {
3
3
  counter_view();
4
4
  const en=document.getElementById('en');
5
5
  const ja=document.getElementById('ja');
6
- const btn2=document.getElementById('btn2');
6
+ const btn=document.getElementById('btn');
7
7
  const total=document.getElementById('total');
8
8
  const table=document.getElementById('table');
9
+ function Color(en, ja) {
10
+ return {
11
+ en,
12
+ ja,
13
+ showInfo() {
14
+ const temp = document.createElement('template');
15
+
16
+ temp.innerHTML = `<td>${this.en}</td><td>${this.ja}</td><td><button class="btn">削除</button></td>`;
17
+ const btn = temp.content.querySelector('.btn');
18
+ btn.addEventListener('click', e => {
19
+ // localStorage.removeItem(words[i][0]);
20
+ // localStorage.removeItem(words[i][1]);
21
+ if (window.confirm('本当に削除しますか?')) {
22
+ let parent = e.target.closest('tr');
23
+ parent.remove();
24
+ localStorage.removeItem('temp');
25
+ //localStorage.clear();//すべて削除
26
+ }
27
+ });
28
+ return temp.content.children;
29
+ },
30
+ showInfo_test_en() {
31
+ return `${this.en}`;
32
+ },
33
+ showInfo_test_ja() {
34
+ return `${this.ja}`;
35
+ }
36
+ }
37
+ }
9
38
  let colors=[];
10
39
  const loadData=localStorage.getItem('colors');
11
40
  if(loadData !=null){
@@ -16,7 +45,154 @@
16
45
  }
17
46
  createTable();
18
47
  }
19
- btn2.addEventListener('click',()=>{
48
+ btn.addEventListener('click',()=>{
49
+ let color=new Color(en.value,ja.value);
50
+ colors.push(color);
51
+ en.value='';
52
+ ja.value='';
53
+ createTable();
54
+ localStorage.setItem("colors",JSON.stringify(colors));
55
+ });
56
+ function createTable(){
57
+ table.innerHTML='<tr><th>単語</th><th>意味</th></tr>';
58
+ for(let i=0;i<colors.length;i++){
59
+ let tr=document.createElement('tr');
60
+ tr.append(...colors[i].showInfo());
61
+ table.appendChild(tr);
62
+ total.textContent=`全${colors.length}件`;
63
+ words[0][i] = colors[i].showInfo_test_en();
64
+ words[1][i] = colors[i].showInfo_test_ja();
65
+ }
66
+ }
67
+ createTable();
68
+ };
69
+
70
+ var n = 5;
71
+ let words = new Array();
72
+ for(var b = 0; b < n; b++) {
73
+ words[b] = new Array();
74
+ for(var a = 0; a < n; a++) {
75
+ words[b][a] = 0;
76
+ }
77
+ }
78
+ var array = [words[0].length];
79
+ for(var i = 0; i<words[0].length; i++){
80
+ array[i] = i;
81
+ }
82
+ for (var i = array.length - 1; i >= 0; i--){
83
+ var rand = Math.floor( Math.random() * ( i + 1 ) );
84
+ [array[i], array[rand]] = [array[rand], array[i]]
85
+ }
86
+
87
+ var q_counter = -1;
88
+ var qa_flag = false;
89
+ var qa_lang = false;
90
+ var q_lang = 0;
91
+ var a_lang = 1;
92
+
93
+
94
+ function switch_jn(){
95
+ if ( q_counter < 0 ) { return false; }
96
+ if ( qa_lang ) {
97
+ document.getElementById('jn_q').value = '日本語:';
98
+ document.getElementById('jn_a').value = '英語:';
99
+ q_lang = "0";
100
+ a_lang = "1";
101
+ } else {
102
+ document.getElementById('jn_q').value = '英語:';
103
+ document.getElementById('jn_a').value = '日本語:';
104
+ q_lang = "1";
105
+ a_lang = "0";
106
+ }
107
+ qa_lang = !(qa_lang);
108
+ qa_view();
109
+ }
110
+
111
+ function prev_btn(){
112
+ if (!(qa_flag)) { q_counter--; }
113
+ if ( q_counter < 0 ) { q_counter = n-1; }
114
+ qa_flag = !(qa_flag);
115
+ counter_view();
116
+ qa_view();
117
+ }
118
+
119
+ function next_btn(){
120
+ if ( !(qa_flag) ) { q_counter++; }
121
+ if ( q_counter >= n ) { q_counter = 0; }
122
+ qa_flag = !(qa_flag);
123
+ counter_view();
124
+ qa_view();
125
+ }
126
+
127
+ function qa_view(){
128
+ document.getElementById('one_q').value = words[q_lang][array[q_counter]];
129
+ if ( qa_flag ) {
130
+ document.getElementById('one_a').value = '';
131
+ } else {
132
+ document.getElementById('one_a').value = words[a_lang][array[q_counter]];
133
+ }
134
+ }
135
+
136
+ function counter_view(){
137
+ document.getElementById('q_cnt').value = q_counter + 1 + '/' + n;
138
+ }
139
+
140
+ /*
141
+ showInfo() {
142
+ const i;
143
+ const btn2=document.getElementsByClassName("btn2");
144
+ btn.addEventListener('click', () => {
145
+ localStorage.removeItem(words[i][0]);
146
+ localStorage.removeItem(words[i][1]);
147
+ if (window.confirm('本当に削除しますか?')) {
148
+ let parent = button.parentNode;
149
+ parent.remove();
150
+ }
151
+ });
152
+ */
153
+ ```
154
+ ```js(classあり)
155
+ window.onload = function () {
156
+ counter_view();
157
+ const en=document.getElementById('en');
158
+ const ja=document.getElementById('ja');
159
+ const btn=document.getElementById('btn');
160
+ const total=document.getElementById('total');
161
+ const table=document.getElementById('table');
162
+ class Color{
163
+ constructor(en,ja){
164
+ this.en=en;
165
+ this.ja=ja
166
+ }
167
+ showInfo(){
168
+ return `<td>${this.en}</td><td>${this.ja}</td><td><button class="btn">削除</button></td>`;
169
+ btn.addEventListener('click',()=>{
170
+ localStorage.removeItem(words[i][0]);
171
+ localStorage.removeItem(words[i][1]);
172
+ if (window.confirm('本当に削除しますか?')) {
173
+ let parent = button.parentNode;
174
+ parent.remove();
175
+ }
176
+ });
177
+ }
178
+ showInfo_test_en(){
179
+ return `${this.en}`;
180
+ }
181
+ showInfo_test_ja(){
182
+ return `${this.ja}`;
183
+ }
184
+ }
185
+ let colors=[];
186
+ const loadData=localStorage.getItem('colors');
187
+ if(loadData !=null){
188
+ let jsonArr=JSON.parse(loadData);
189
+ for(let i=0;i<jsonArr.length;i++){
190
+ let color=new Color(jsonArr[i].en,jsonArr[i].ja);
191
+ colors.push(color);
192
+ }
193
+ createTable();
194
+ }
195
+ btn.addEventListener('click',()=>{
20
196
  let color=new Color(en.value,ja.value);
21
197
  colors.push(color);
22
198
  en.value='';
@@ -36,35 +212,9 @@
36
212
  }
37
213
  }
38
214
  createTable();
39
- function Color(en, ja) {
40
- return {
41
- en,
42
- ja,
43
- showInfo() {
44
- const i;
45
- const btn2=document.getElementsByClassName("btn2");
46
- btn.addEventListener('click', () => {
47
- localStorage.removeItem(words[i][0]);
48
- localStorage.removeItem(words[i][1]);
49
- if (window.confirm('本当に削除しますか?')) {
50
- let parent = button.parentNode;
51
- parent.remove();
52
- }
53
- });
54
- return `<td>${this.en}</td><td>${this.ja}</td><td><button class="btn2">削除</button></td>`;
55
- },
56
- showInfo_test_en() {
57
- return `${this.en}`;
58
- },
59
- showInfo_test_ja() {
60
- return `${this.ja}`;
61
- }
62
-
63
- }
64
- }
65
215
  };
66
216
 
67
- var n = 5;//colors.length;
217
+ var n = 15;
68
218
  let words = new Array();
69
219
  for(var b = 0; b < n; b++) {
70
220
  words[b] = new Array();
@@ -133,181 +283,6 @@
133
283
  function counter_view(){
134
284
  document.getElementById('q_cnt').value = q_counter + 1 + '/' + words[0].length;
135
285
  }
136
-
137
- ```
138
-
139
- ### 質問内容
140
- ↓htmlやjsで単語帳を作成しています
141
- ウェブサイト上で単語の追加,削除をし、テーブルに一覧を出力。
142
- また、単語テストができるように日本語、英語を交互に表示。
143
- ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-06-15/c5114e01-877a-457e-9416-5559018a18a8.png)
144
- 動作はするのですが、クラスを使わずに完成させたいです。
145
- javascriptはほぼ触ったことがないことと、いくつかのサイトで調べたことを強引に上書きしただけです。
146
- 本当に読みにくいコードで申し訳ないのですが、よろしくお願いします。
147
- ###
148
-
149
- ```html
150
- <html lang="ja">
151
- <head>
152
- <meta charset="utf-8">
153
- <meta name="viewport" content="width=device-width">
154
- <script src="wtscript.js"></script>
155
- </head>
156
- <body>
157
-
158
- <input type="text" readonly="readonly" size="3" value="" id="q_cnt"><br>
159
- <input type="text" readonly="readonly" size="6" value="日本語:" id="jn_q" >
160
- <input type="text" readonly="readonly" size="20" value="" id="one_q"><br>
161
- [<a href="javascript:void(0);" onClick="switch_jn();"> ↑↓ </a>]<br>
162
- <input type="text" readonly="readonly" size="6" value="英語:" id="jn_a" >
163
- <input type="text" readonly="readonly" size="20" value="" id="one_a"><br>
164
- <br>
165
- <a href="javascript:void(0);" onClick="prev_btn();" class="bottum"> BACK </a>/<a href="javascript:void(0);" onClick="next_btn();"class="bottum"> NEXT </a><br>
166
-
167
-
168
- <!--保存-->
169
- <input type="text" id="en" placeholder="単語">
170
- <input type="text" id="ja" placeholder="意味">
171
- <button id="btn">登録</button>
172
- <p id="total">全0件</p>
173
- <table id="table"></table>
174
-
175
- </body>
176
- </html>
177
-
178
- ```
179
- ```js(classあり)
180
- window.onload = function () {
181
- counter_view();
182
- const en=document.getElementById('en');
183
- const ja=document.getElementById('ja');
184
- const btn=document.getElementById('btn');
185
- const total=document.getElementById('total');
186
- const table=document.getElementById('table');
187
- class Color{
188
- constructor(en,ja){
189
- this.en=en;
190
- this.ja=ja
191
- }
192
- showInfo(){
193
- return `<td>${this.en}</td><td>${this.ja}</td><td><button class="btn">削除</button></td>`;
194
- btn.addEventListener('click',()=>{
195
- localStorage.removeItem(words[i][0]);
196
- localStorage.removeItem(words[i][1]);
197
- if (window.confirm('本当に削除しますか?')) {
198
- let parent = button.parentNode;
199
- parent.remove();
200
- }
201
- });
202
- }
203
- showInfo_test_en(){
204
- return `${this.en}`;
205
- }
206
- showInfo_test_ja(){
207
- return `${this.ja}`;
208
- }
209
- }
210
- let colors=[];
211
- const loadData=localStorage.getItem('colors');
212
- if(loadData !=null){
213
- let jsonArr=JSON.parse(loadData);
214
- for(let i=0;i<jsonArr.length;i++){
215
- let color=new Color(jsonArr[i].en,jsonArr[i].ja);
216
- colors.push(color);
217
- }
218
- createTable();
219
- }
220
- btn.addEventListener('click',()=>{
221
- let color=new Color(en.value,ja.value);
222
- colors.push(color);
223
- en.value='';
224
- ja.value='';
225
- createTable();
226
- localStorage.setItem("colors",JSON.stringify(colors));
227
- });
228
- function createTable(){
229
- table.innerHTML='<tr><th>単語</th><th>意味</th></tr>';
230
- for(let i=0;i<colors.length;i++){
231
- let tr=document.createElement('tr');
232
- tr.innerHTML=colors[i].showInfo();
233
- table.appendChild(tr);
234
- total.textContent=`全${colors.length}件`;
235
- words[0][i] = colors[i].showInfo_test_en();
236
- words[1][i] = colors[i].showInfo_test_ja();
237
- }
238
- }
239
- createTable();
240
- };
241
-
242
- var n = 15;
243
- let words = new Array();
244
- for(var b = 0; b < n; b++) {
245
- words[b] = new Array();
246
- for(var a = 0; a < n; a++) {
247
- words[b][a] = 0;
248
- }
249
- }
250
- var array = [words[0].length];
251
- for(var i = 0; i<words[0].length; i++){
252
- array[i] = i;
253
- }
254
- for (var i = array.length - 1; i >= 0; i--){
255
- var rand = Math.floor( Math.random() * ( i + 1 ) );
256
- [array[i], array[rand]] = [array[rand], array[i]]
257
- }
258
-
259
- var q_counter = -1;
260
- var qa_flag = false;
261
- var qa_lang = false;
262
- var q_lang = 0;
263
- var a_lang = 1;
264
-
265
-
266
- function switch_jn(){
267
- if ( q_counter < 0 ) { return false; }
268
- if ( qa_lang ) {
269
- document.getElementById('jn_q').value = '日本語:';
270
- document.getElementById('jn_a').value = '英語:';
271
- q_lang = "0";
272
- a_lang = "1";
273
- } else {
274
- document.getElementById('jn_q').value = '英語:';
275
- document.getElementById('jn_a').value = '日本語:';
276
- q_lang = "1";
277
- a_lang = "0";
278
- }
279
- qa_lang = !(qa_lang);
280
- qa_view();
281
- }
282
-
283
- function prev_btn(){
284
- if (!(qa_flag)) { q_counter--; }
285
- if ( q_counter < 0 ) { q_counter = words[0].length - 1; }
286
- qa_flag = !(qa_flag);
287
- counter_view();
288
- qa_view();
289
- }
290
-
291
- function next_btn(){
292
- if ( !(qa_flag) ) { q_counter++; }
293
- if ( q_counter >= words[0].length ) { q_counter = 0; }
294
- qa_flag = !(qa_flag);
295
- counter_view();
296
- qa_view();
297
- }
298
-
299
- function qa_view(){
300
- document.getElementById('one_q').value = words[q_lang][array[q_counter]];
301
- if ( qa_flag ) {
302
- document.getElementById('one_a').value = '';
303
- } else {
304
- document.getElementById('one_a').value = words[a_lang][array[q_counter]];
305
- }
306
- }
307
-
308
- function counter_view(){
309
- document.getElementById('q_cnt').value = q_counter + 1 + '/' + words[0].length;
310
- }
311
286
  ```
312
287
  ここまで正常に動作するプログラムです。
313
288
  ###

3

コード訂正

2022/06/16 10:06

投稿

tetucame
tetucame

score1

test CHANGED
File without changes
test CHANGED
@@ -1,3 +1,141 @@
1
+ ```6/16訂正版
2
+ window.onload = function () {
3
+ counter_view();
4
+ const en=document.getElementById('en');
5
+ const ja=document.getElementById('ja');
6
+ const btn2=document.getElementById('btn2');
7
+ const total=document.getElementById('total');
8
+ const table=document.getElementById('table');
9
+ let colors=[];
10
+ const loadData=localStorage.getItem('colors');
11
+ if(loadData !=null){
12
+ let jsonArr=JSON.parse(loadData);
13
+ for(let i=0;i<jsonArr.length;i++){
14
+ let color=new Color(jsonArr[i].en,jsonArr[i].ja);
15
+ colors.push(color);
16
+ }
17
+ createTable();
18
+ }
19
+ btn2.addEventListener('click',()=>{
20
+ let color=new Color(en.value,ja.value);
21
+ colors.push(color);
22
+ en.value='';
23
+ ja.value='';
24
+ createTable();
25
+ localStorage.setItem("colors",JSON.stringify(colors));
26
+ });
27
+ function createTable(){
28
+ table.innerHTML='<tr><th>単語</th><th>意味</th></tr>';
29
+ for(let i=0;i<colors.length;i++){
30
+ let tr=document.createElement('tr');
31
+ tr.innerHTML=colors[i].showInfo();
32
+ table.appendChild(tr);
33
+ total.textContent=`全${colors.length}件`;
34
+ words[0][i] = colors[i].showInfo_test_en();
35
+ words[1][i] = colors[i].showInfo_test_ja();
36
+ }
37
+ }
38
+ createTable();
39
+ function Color(en, ja) {
40
+ return {
41
+ en,
42
+ ja,
43
+ showInfo() {
44
+ const i;
45
+ const btn2=document.getElementsByClassName("btn2");
46
+ btn.addEventListener('click', () => {
47
+ localStorage.removeItem(words[i][0]);
48
+ localStorage.removeItem(words[i][1]);
49
+ if (window.confirm('本当に削除しますか?')) {
50
+ let parent = button.parentNode;
51
+ parent.remove();
52
+ }
53
+ });
54
+ return `<td>${this.en}</td><td>${this.ja}</td><td><button class="btn2">削除</button></td>`;
55
+ },
56
+ showInfo_test_en() {
57
+ return `${this.en}`;
58
+ },
59
+ showInfo_test_ja() {
60
+ return `${this.ja}`;
61
+ }
62
+
63
+ }
64
+ }
65
+ };
66
+
67
+ var n = 5;//colors.length;
68
+ let words = new Array();
69
+ for(var b = 0; b < n; b++) {
70
+ words[b] = new Array();
71
+ for(var a = 0; a < n; a++) {
72
+ words[b][a] = 0;
73
+ }
74
+ }
75
+ var array = [words[0].length];
76
+ for(var i = 0; i<words[0].length; i++){
77
+ array[i] = i;
78
+ }
79
+ for (var i = array.length - 1; i >= 0; i--){
80
+ var rand = Math.floor( Math.random() * ( i + 1 ) );
81
+ [array[i], array[rand]] = [array[rand], array[i]]
82
+ }
83
+
84
+ var q_counter = -1;
85
+ var qa_flag = false;
86
+ var qa_lang = false;
87
+ var q_lang = 0;
88
+ var a_lang = 1;
89
+
90
+
91
+ function switch_jn(){
92
+ if ( q_counter < 0 ) { return false; }
93
+ if ( qa_lang ) {
94
+ document.getElementById('jn_q').value = '日本語:';
95
+ document.getElementById('jn_a').value = '英語:';
96
+ q_lang = "0";
97
+ a_lang = "1";
98
+ } else {
99
+ document.getElementById('jn_q').value = '英語:';
100
+ document.getElementById('jn_a').value = '日本語:';
101
+ q_lang = "1";
102
+ a_lang = "0";
103
+ }
104
+ qa_lang = !(qa_lang);
105
+ qa_view();
106
+ }
107
+
108
+ function prev_btn(){
109
+ if (!(qa_flag)) { q_counter--; }
110
+ if ( q_counter < 0 ) { q_counter = words[0].length - 1; }
111
+ qa_flag = !(qa_flag);
112
+ counter_view();
113
+ qa_view();
114
+ }
115
+
116
+ function next_btn(){
117
+ if ( !(qa_flag) ) { q_counter++; }
118
+ if ( q_counter >= words[0].length ) { q_counter = 0; }
119
+ qa_flag = !(qa_flag);
120
+ counter_view();
121
+ qa_view();
122
+ }
123
+
124
+ function qa_view(){
125
+ document.getElementById('one_q').value = words[q_lang][array[q_counter]];
126
+ if ( qa_flag ) {
127
+ document.getElementById('one_a').value = '';
128
+ } else {
129
+ document.getElementById('one_a').value = words[a_lang][array[q_counter]];
130
+ }
131
+ }
132
+
133
+ function counter_view(){
134
+ document.getElementById('q_cnt').value = q_counter + 1 + '/' + words[0].length;
135
+ }
136
+
137
+ ```
138
+
1
139
  ### 質問内容
2
140
  ↓htmlやjsで単語帳を作成しています
3
141
  ウェブサイト上で単語の追加,削除をし、テーブルに一覧を出力。
@@ -180,114 +318,7 @@
180
318
 
181
319
  ### 試したこと
182
320
  ```js
183
- window.onload = function () {
184
- counter_view();
185
- const en=document.getElementById('en');
186
- const ja=document.getElementById('ja');
187
- const btn=document.getElementById('btn');
188
- const total=document.getElementById('total');
189
- const table=document.getElementById('table');
190
-
191
- let colors=[];
192
- const loadData=localStorage.getItem('colors');
193
- if(loadData !=null){
321
+ 文字数制限のため削除させていただきました
194
- let jsonArr=JSON.parse(loadData);
195
- createTable();
196
- }
197
- btn.addEventListener('click',()=>{
198
- en.value='';
199
- ja.value='';
200
- for(let i=0;i<colors.length;i++){
201
- this.en[i]=en;
202
- this.ja[i]=ja;
203
- }
204
- createTable();
205
- localStorage.setItem("colors",JSON.stringify(colors));
206
- });
207
- function createTable(){
208
- table.innerHTML='<tr><th>単語</th><th>意味</th></tr>';
209
- for(let i=0;i<colors.length;i++){
210
- let tr=document.createElement('tr');
211
- tr.innerHTML= `<td>${this.en[i]}</td><td>${this.ja[i]}</td><td><button class="btn">削除</button></td>`;
212
-
213
- table.appendChild(tr);
214
- total.textContent=`全${colors.length}件`;
215
- words[0][i] = `${this.en[i]}`;
216
- words[1][i] = `${this.ja[i]}`;
217
- }
218
- }
219
- createTable();
220
- };
221
-
222
- var n = 15;
223
- let words = new Array();
224
- for(var b = 0; b < n; b++) {
225
- words[b] = new Array();
226
- for(var a = 0; a < n; a++) {
227
- words[b][a] = 0;
228
- }
229
- }
230
- var array = [words[0].length];
231
- for(var i = 0; i<words[0].length; i++){
232
- array[i] = i;
233
- }
234
- for (var i = array.length - 1; i >= 0; i--){
235
- var rand = Math.floor( Math.random() * ( i + 1 ) );
236
- [array[i], array[rand]] = [array[rand], array[i]]
237
- }
238
-
239
- var q_counter = -1;
240
- var qa_flag = false;
241
- var qa_lang = false;
242
- var q_lang = 0;
243
- var a_lang = 1;
244
-
245
-
246
- function switch_jn(){
247
- if ( q_counter < 0 ) { return false; }
248
- if ( qa_lang ) {
249
- document.getElementById('jn_q').value = '日本語:';
250
- document.getElementById('jn_a').value = '英語:';
251
- q_lang = "0";
252
- a_lang = "1";
253
- } else {
254
- document.getElementById('jn_q').value = '英語:';
255
- document.getElementById('jn_a').value = '日本語:';
256
- q_lang = "1";
257
- a_lang = "0";
258
- }
259
- qa_lang = !(qa_lang);
260
- qa_view();
261
- }
262
-
263
- function prev_btn(){
264
- if (!(qa_flag)) { q_counter--; }
265
- if ( q_counter < 0 ) { q_counter = words[0].length - 1; }
266
- qa_flag = !(qa_flag);
267
- counter_view();
268
- qa_view();
269
- }
270
-
271
- function next_btn(){
272
- if ( !(qa_flag) ) { q_counter++; }
273
- if ( q_counter >= words[0].length ) { q_counter = 0; }
274
- qa_flag = !(qa_flag);
275
- counter_view();
276
- qa_view();
277
- }
278
-
279
- function qa_view(){
280
- document.getElementById('one_q').value = words[q_lang][array[q_counter]];
281
- if ( qa_flag ) {
282
- document.getElementById('one_a').value = '';
283
- } else {
284
- document.getElementById('one_a').value = words[a_lang][array[q_counter]];
285
- }
286
- }
287
-
288
- function counter_view(){
289
- document.getElementById('q_cnt').value = q_counter + 1 + '/' + words[0].length;
290
- }
291
322
 
292
323
  ```
293
324
 

2

コードの訂正

2022/06/16 00:50

投稿

tetucame
tetucame

score1

test CHANGED
File without changes
test CHANGED
@@ -9,6 +9,14 @@
9
9
  ###
10
10
 
11
11
  ```html
12
+ <html lang="ja">
13
+ <head>
14
+ <meta charset="utf-8">
15
+ <meta name="viewport" content="width=device-width">
16
+ <script src="wtscript.js"></script>
17
+ </head>
18
+ <body>
19
+
12
20
  <input type="text" readonly="readonly" size="3" value="" id="q_cnt"><br>
13
21
  <input type="text" readonly="readonly" size="6" value="日本語:" id="jn_q" >
14
22
  <input type="text" readonly="readonly" size="20" value="" id="one_q"><br>
@@ -18,12 +26,17 @@
18
26
  <br>
19
27
  <a href="javascript:void(0);" onClick="prev_btn();" class="bottum"> BACK </a>/<a href="javascript:void(0);" onClick="next_btn();"class="bottum"> NEXT </a><br>
20
28
 
29
+
21
30
  <!--保存-->
22
31
  <input type="text" id="en" placeholder="単語">
23
32
  <input type="text" id="ja" placeholder="意味">
24
33
  <button id="btn">登録</button>
25
34
  <p id="total">全0件</p>
26
35
  <table id="table"></table>
36
+
37
+ </body>
38
+ </html>
39
+
27
40
  ```
28
41
  ```js(classあり)
29
42
  window.onload = function () {

1

校正

2022/06/15 05:51

投稿

tetucame
tetucame

score1

test CHANGED
File without changes
test CHANGED
@@ -3,9 +3,9 @@
3
3
  ウェブサイト上で単語の追加,削除をし、テーブルに一覧を出力。
4
4
  また、単語テストができるように日本語、英語を交互に表示。
5
5
  ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-06-15/c5114e01-877a-457e-9416-5559018a18a8.png)
6
- 動作するのですが、オブジェト指向のクラスをなくしたいです。
6
+ 動作するのですが、クラスを使わずに完成させたいです。
7
- javascriptはほぼ触ったことがないことと、調べたことをただいていっただけです。
7
+ javascriptはほぼ触ったことがないことと、いくつかのサイトで調べたことを強引に上きしただけです。
8
- 本当に読みにくいコードで申し訳ないのですが、classを用ないプログラムを教えていただけたらと思います。
8
+ 本当に読みにくいコードで申し訳ないのですが、よろしくお願ます。
9
9
  ###
10
10
 
11
11
  ```html