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

回答編集履歴

1

chousei

2021/12/02 13:19

投稿

yambejp
yambejp

スコア117914

answer CHANGED
@@ -11,28 +11,28 @@
11
11
  window.addEventListener('DOMContentLoaded', ()=>{
12
12
  const q="Many people visit London every year .";
13
13
  const view=document.querySelector('#view');
14
- q.split(' ')
14
+ const q_arr=q.split(' ')
15
15
  .map(x=>[x,Math.random()])
16
16
  .sort((x,y)=>x[1]-y[1])
17
- .map(x=>x[0])
17
+ .map(x=>x[0]);
18
- .forEach(x=>view.append(Object.assign(document.createElement('div'),{textContent:x})));
18
+ q_arr.forEach(x=>view.append(Object.assign(document.createElement('div'),{textContent:x})));
19
- const a=[];
19
+ const a_arr=[];
20
20
  document.querySelectorAll('#view div').forEach(x=>{
21
21
  x.addEventListener('click',e=>{
22
22
  if(!e.target.closest('[data-disabled]')){
23
- a.push(e.target.textContent);
23
+ a_arr.push(e.target.textContent);
24
24
  e.target.setAttribute('data-disabled',1);
25
- ans.textContent=a.join(" ");
25
+ ans.textContent=a_arr.join(" ");
26
- if(ans.textContent==q){
26
+ if(a_arr.length==q_arr.length){
27
- document.querySelector('#judge').textContent='正解!';
27
+ document.querySelector('#judge').textContent=q==ans.textContent?'正解!':'不正解';
28
28
  }
29
29
  }
30
30
  });
31
31
  });
32
32
  document.querySelector('#reset').addEventListener('click',e=>{
33
- a.length=0;
33
+ a_arr.length=0;
34
34
  document.querySelectorAll('[data-disabled]').forEach(x=>x.removeAttribute('data-disabled'));
35
- document.querySelector('#ans').textContent='';
35
+ document.querySelectorAll('#ans,#judge').forEach(x=>x.textContent='');
36
36
  });
37
37
  });
38
38
  </script>
@@ -40,4 +40,5 @@
40
40
  <input type="button" id="reset" value="リセット">
41
41
  <div id="ans"></div>
42
42
  <div id="judge"></div>
43
+
43
44
  ```