Q&A
あー、終わってたか
Javescriptでクイズアプリを実装してる中、
結果画面では回答ボタンを消すためstyle.display = 'none'をおこなったのですが
エラーが出てうまくいきません。
js
1const hide = () => { 2 const bt = document.getElementsByClassName('button'); 3 bt.style.display = 'none'; 4} 5hide();
コード全文
js
1<!DOCTYPE html> 2<meta http-equiv="content-type" charset="utf-8"> 3<html> 4<head> 5<title>JavaScriptでクイズアプリを作るサンプル</title> 6<style> 7 * { margin: 0; padding: 0; box-sizing: border-box; } 8</style> 9</head> 10<body> 11 <h2 id="question"></h2> 12 <div> 13 <div id="answer1"></div> 14 <div id="answer2"></div> 15 </div> 16 <button type="button" class="button" onclick="AnswerCheck(1)">回答1</button> 17 <button type="button" class="button" onclick="AnswerCheck(2)">回答2</button> 18 19 20 <script type="text/javascript"> 21 const Question = [ 22 [ 23 "<div>第1問</div>JavaScriptで「Hello World」を正しく表示されないのはどれ？", 24 "1. document.write('Hello World');", 25 "2. document.write(Hello World);", 26 "1" 27 ], 28 [ 29 "<div>第2問</div>JavaScriptで【document.write(5 + 4);】を実行したらどうなる？", 30 "1. 5 + 4);", 31 "2. 9", 32 "2" 33 ], 34 ]; 35 36 const Q = document.getElementById('question'); 37 const A1 = document.getElementById('answer1'); 38 const A2 = document.getElementById('answer2'); 39 40 let correct = 0; 41 let Qcount = 0; 42 43 const QSet = () => { 44 Q.innerHTML = Question[Qcount][0]; 45 A1.innerHTML = Question[Qcount][1]; 46 A2.innerHTML = Question[Qcount][2]; 47 }; 48 QSet(); 49 50 const AnswerCheck = (answer) => { 51 if(answer == Question[Qcount][3]) { 52 alert('正解'); 53 correct++; 54 } else { 55 alert('不正解'); 56 } 57 58 Qcount++; 59 60 if (Qcount == Question.length) { 61 if (correct == Question.length) { 62 Q.innerHTML = '問題は以上です。' + Question.length + '問中' + correct + '問正解。<br />おめでとう。全問正解です。'; 63 } else if (correct == 0) { 64 Q.innerHTML = '問題は以上です。' + Question.length + '問中全て不正解でした。<br />次はガンバって！'; 65 } else { 66 Q.innerHTML = '問題は以上です。' + Question.length + '問中' + correct + '問正解。'; 67 } 68 A1.innerHTML = ''; 69 A2.innerHTML = ''; 70 71 // ここがうまく効いてくれない 72 const hide = () => { 73 const bt = document.getElementsByClassName('button'); 74 bt.style.display = 'none'; 75 } 76 hide(); 77 78 } else { 79 QSet(); 80 } 81 } 82 </script> 83</body> 84</html>
回答2件
0
ベストアンサー
getElementsByClassNameは配列のようなHTMLCollection を返すので、1つしか要素が無くてもそれに適したアクセスをする必要があります。
js
1 const bt = document.getElementsByClassName('button'); 2 // bt.style.display = 'none'; 3 bt[0].style.display = 'none'; // 一つ目のみ処理する場合
【Document.getElementsByClassName() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByClassName
投稿2020/07/04 07:09
総合スコア69407
0
js
1console.log(bt);
で見ると値が複数入ってるので、それが原因じゃね？
チャント指定してやればOKかと
投稿2020/07/04 07:27
総合スコア765
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/07/04 07:14