teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

6

訂正

2022/06/20 10:23

投稿

tetucame
tetucame

スコア1

title CHANGED
File without changes
body 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

スコア1

title CHANGED
File without changes
body 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

スコア1

title CHANGED
File without changes
body 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,7 @@
16
45
  }
17
46
  createTable();
18
47
  }
19
- btn2.addEventListener('click',()=>{
48
+ btn.addEventListener('click',()=>{
20
49
  let color=new Color(en.value,ja.value);
21
50
  colors.push(color);
22
51
  en.value='';
@@ -28,7 +57,7 @@
28
57
  table.innerHTML='<tr><th>単語</th><th>意味</th></tr>';
29
58
  for(let i=0;i<colors.length;i++){
30
59
  let tr=document.createElement('tr');
31
- tr.innerHTML=colors[i].showInfo();
60
+ tr.append(...colors[i].showInfo());
32
61
  table.appendChild(tr);
33
62
  total.textContent=`全${colors.length}件`;
34
63
  words[0][i] = colors[i].showInfo_test_en();
@@ -36,35 +65,9 @@
36
65
  }
37
66
  }
38
67
  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
68
  };
66
69
 
67
- var n = 5;//colors.length;
70
+ var n = 5;
68
71
  let words = new Array();
69
72
  for(var b = 0; b < n; b++) {
70
73
  words[b] = new Array();
@@ -107,7 +110,7 @@
107
110
 
108
111
  function prev_btn(){
109
112
  if (!(qa_flag)) { q_counter--; }
110
- if ( q_counter < 0 ) { q_counter = words[0].length - 1; }
113
+ if ( q_counter < 0 ) { q_counter = n-1; }
111
114
  qa_flag = !(qa_flag);
112
115
  counter_view();
113
116
  qa_view();
@@ -115,7 +118,7 @@
115
118
 
116
119
  function next_btn(){
117
120
  if ( !(qa_flag) ) { q_counter++; }
118
- if ( q_counter >= words[0].length ) { q_counter = 0; }
121
+ if ( q_counter >= n ) { q_counter = 0; }
119
122
  qa_flag = !(qa_flag);
120
123
  counter_view();
121
124
  qa_view();
@@ -131,51 +134,23 @@
131
134
  }
132
135
 
133
136
  function counter_view(){
134
- document.getElementById('q_cnt').value = q_counter + 1 + '/' + words[0].length;
137
+ document.getElementById('q_cnt').value = q_counter + 1 + '/' + n;
135
138
  }
136
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
+ */
137
153
  ```
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
154
  ```js(classあり)
180
155
  window.onload = function () {
181
156
  counter_view();

3

コード訂正

2022/06/16 10:06

投稿

tetucame
tetucame

スコア1

title CHANGED
File without changes
body CHANGED
@@ -1,74 +1,11 @@
1
- ### 質問内容
2
- ↓htmlやjsで単語帳を作成しています
3
- ウェブサイト上で単語の追加,削除をし、テーブルに一覧を出力。
4
- また、単語テストができるように日本語、英語を交互に表示。
5
- ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-06-15/c5114e01-877a-457e-9416-5559018a18a8.png)
6
- 動作はするのですが、クラスを使わずに完成させたいです。
7
- javascriptはほぼ触ったことがないことと、いくつかのサイトで調べたことを強引に上書きしただけです。
8
- 本当に読みにくいコードで申し訳ないのですが、よろしくお願いします。
9
- ###
10
-
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>
1
+ ```6/16訂正版
18
- <body>
19
-
20
- <input type="text" readonly="readonly" size="3" value="" id="q_cnt"><br>
21
- <input type="text" readonly="readonly" size="6" value="日本語:" id="jn_q" >
22
- <input type="text" readonly="readonly" size="20" value="" id="one_q"><br>
23
- [<a href="javascript:void(0);" onClick="switch_jn();"> ↑↓ </a>]<br>
24
- <input type="text" readonly="readonly" size="6" value="英語:" id="jn_a" >
25
- <input type="text" readonly="readonly" size="20" value="" id="one_a"><br>
26
- <br>
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>
28
-
29
-
30
- <!--保存-->
31
- <input type="text" id="en" placeholder="単語">
32
- <input type="text" id="ja" placeholder="意味">
33
- <button id="btn">登録</button>
34
- <p id="total">全0件</p>
35
- <table id="table"></table>
36
-
37
- </body>
38
- </html>
39
-
40
- ```
41
- ```js(classあり)
42
2
  window.onload = function () {
43
3
  counter_view();
44
4
  const en=document.getElementById('en');
45
5
  const ja=document.getElementById('ja');
46
- const btn=document.getElementById('btn');
6
+ const btn2=document.getElementById('btn2');
47
7
  const total=document.getElementById('total');
48
8
  const table=document.getElementById('table');
49
- class Color{
50
- constructor(en,ja){
51
- this.en=en;
52
- this.ja=ja
53
- }
54
- showInfo(){
55
- return `<td>${this.en}</td><td>${this.ja}</td><td><button class="btn">削除</button></td>`;
56
- btn.addEventListener('click',()=>{
57
- localStorage.removeItem(words[i][0]);
58
- localStorage.removeItem(words[i][1]);
59
- if (window.confirm('本当に削除しますか?')) {
60
- let parent = button.parentNode;
61
- parent.remove();
62
- }
63
- });
64
- }
65
- showInfo_test_en(){
66
- return `${this.en}`;
67
- }
68
- showInfo_test_ja(){
69
- return `${this.ja}`;
70
- }
71
- }
72
9
  let colors=[];
73
10
  const loadData=localStorage.getItem('colors');
74
11
  if(loadData !=null){
@@ -79,7 +16,7 @@
79
16
  }
80
17
  createTable();
81
18
  }
82
- btn.addEventListener('click',()=>{
19
+ btn2.addEventListener('click',()=>{
83
20
  let color=new Color(en.value,ja.value);
84
21
  colors.push(color);
85
22
  en.value='';
@@ -99,9 +36,35 @@
99
36
  }
100
37
  }
101
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
+ }
102
65
  };
103
66
 
104
- var n = 15;
67
+ var n = 5;//colors.length;
105
68
  let words = new Array();
106
69
  for(var b = 0; b < n; b++) {
107
70
  words[b] = new Array();
@@ -170,37 +133,95 @@
170
133
  function counter_view(){
171
134
  document.getElementById('q_cnt').value = q_counter + 1 + '/' + words[0].length;
172
135
  }
136
+
173
137
  ```
138
+
139
+ ### 質問内容
140
+ ↓htmlやjsで単語帳を作成しています
141
+ ウェブサイト上で単語の追加,削除をし、テーブルに一覧を出力。
142
+ また、単語テストができるように日本語、英語を交互に表示。
143
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-06-15/c5114e01-877a-457e-9416-5559018a18a8.png)
174
- ここまで正常に動作するプログです。
144
+ 動作するのですが、クスを使わずに完成させたいです。
145
+ javascriptはほぼ触ったことがないことと、いくつかのサイトで調べたことを強引に上書きしただけです。
146
+ 本当に読みにくいコードで申し訳ないのですが、よろしくお願いします。
175
147
  ###
176
- ###
177
- ###
178
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>
179
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>
180
166
 
167
+
181
- ### 試したこと
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
+
182
- ```js
178
+ ```
179
+ ```js(classあり)
183
180
  window.onload = function () {
184
181
  counter_view();
185
- const en=document.getElementById('en');
182
+ const en=document.getElementById('en');
186
183
  const ja=document.getElementById('ja');
187
184
  const btn=document.getElementById('btn');
188
185
  const total=document.getElementById('total');
189
186
  const table=document.getElementById('table');
190
-
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
+ }
191
210
  let colors=[];
192
211
  const loadData=localStorage.getItem('colors');
193
212
  if(loadData !=null){
194
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
+ }
195
218
  createTable();
196
219
  }
197
220
  btn.addEventListener('click',()=>{
221
+ let color=new Color(en.value,ja.value);
222
+ colors.push(color);
198
223
  en.value='';
199
224
  ja.value='';
200
- for(let i=0;i<colors.length;i++){
201
- this.en[i]=en;
202
- this.ja[i]=ja;
203
- }
204
225
  createTable();
205
226
  localStorage.setItem("colors",JSON.stringify(colors));
206
227
  });
@@ -208,12 +229,11 @@
208
229
  table.innerHTML='<tr><th>単語</th><th>意味</th></tr>';
209
230
  for(let i=0;i<colors.length;i++){
210
231
  let tr=document.createElement('tr');
211
- tr.innerHTML= `<td>${this.en[i]}</td><td>${this.ja[i]}</td><td><button class="btn">削除</button></td>`;
232
+ tr.innerHTML=colors[i].showInfo();
212
-
213
233
  table.appendChild(tr);
214
234
  total.textContent=`全${colors.length}件`;
215
- words[0][i] = `${this.en[i]}`;
235
+ words[0][i] = colors[i].showInfo_test_en();
216
- words[1][i] = `${this.ja[i]}`;
236
+ words[1][i] = colors[i].showInfo_test_ja();
217
237
  }
218
238
  }
219
239
  createTable();
@@ -288,5 +308,16 @@
288
308
  function counter_view(){
289
309
  document.getElementById('q_cnt').value = q_counter + 1 + '/' + words[0].length;
290
310
  }
311
+ ```
312
+ ここまで正常に動作するプログラムです。
313
+ ###
314
+ ###
315
+ ###
291
316
 
317
+
318
+
319
+ ### 試したこと
320
+ ```js
321
+ 文字数制限のため削除させていただきました
322
+
292
323
  ```

2

コードの訂正

2022/06/16 00:50

投稿

tetucame
tetucame

スコア1

title CHANGED
File without changes
body 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

スコア1

title CHANGED
File without changes
body 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