【Javascript】style.display = 'none'がうまく発動しない

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件

ベストアンサー

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

kei344

総合スコア69606

DaisukeMori

2020/07/04 07:14

ご回答ありがとうございました。コチラのコードで無事2個の回答ボタンが消えてくれました。 ```js const hide = () => { const bt = document.getElementsByClassName('button'); bt[0].style.display = 'none'; bt[1].style.display = 'none'; } hide(); ```

行動規範の内容に同意します