onclickが効かない

前提・実現したいこと

onclickを使用して要素の表示、非表示を切り替えたいのですが、クリックしても何も起こりません。
console.logを使用して検証した結果、button-d(HTMLの99~102行目）もonclickの動作も取得できていました。
addEventListenerも試してみましたが、定数のbuttonが単一ノードではないため使用できませんでした。
改善策をよろしくお願いします。

該当のソースコード

HTML
1<!doctype html>
2<html class="no-js" lang="">
3
4<head>
5  <meta charset="utf-8">
6  <title></title>
7  <meta name="description" content="">
8  <meta name="viewport" content="width=device-width, initial-scale=1">
9
10  <meta property="og:title" content="">
11  <meta property="og:type" content="">
12  <meta property="og:url" content="">
13  <meta property="og:image" content="">
14
15  <link rel="manifest" href="site.webmanifest">
16  <link rel="apple-touch-icon" href="icon.png">
17  <!-- Place favicon.ico in the root directory -->
18
19  <!-- CSS only -->
20<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
21
22  <meta name="theme-color" content="#fafafa">
23
24</head>
25<body>
26
27  <style>
28
29      .container{
30        margin-right: auto;
31        margin-left: auto;
32        max-width: 700px;
33
34        background-image:url(haikei.png);
35        background-size:cover;
36        background-position:center center;
37        background-repeat: no-repeat;
38        object-fit: cover;
39        position: relative;
40      }
41      
42      .question{
43        text-align:center;
44        position:absolute;
45        border: solid 2px gray;
46      }
47
48      .fixed-bottom{
49        margin: 0;
50        position:absolute;
51        text-align:center;
52      }
53
54      .answer{
55        border: solid 2px gray;
56      }
57
58      .smile{
59        position: absolute;
60        animation:
61        name1 3s step-end 0s infinite normal;
62        z-index: 2;
63      }
64
65      .sleep{
66        position: absolute;
67        z-index: 1;
68      }
69
70      @keyframes name1{
71        0%{ opacity:1; }
72        
73        35%{ opacity:0; }
74
75        40%{ opacity:1; }
76
77        80%{ opacity:0; }
78
79        85%{ opacity:1; }
80
81        95%{ opacity:0; }
82
83        100%{ opacity:1; }
84      }
85      
86    </style>
87
88<div class="p-4">
89</div><!---- space -->
90
91   <div id="top"class="container mt-5 py-5 px-0">
92
93   <div id="question" class="row justify-content-center">
94      <div class="question fixed-top">問題文</div>
95    </div><!---- question -->
96
97   <div class="row flex-column d-flex align-items-center justify-content-center" style="margin:0;">
98      <h1 class="col-3 text-center mb-5">クイズ</h1>
99      <button type="button" class="button-d col-2 btn btn-primary mb-3 w-25">初級</button>
100      <button type="button" class="button-d col-2 ml-1 btn btn-primary mb-3 w-25">中級</button>
101      <button type="button" class="button-d col-2 ml-1 btn btn-primary mb-3 w-25">上級</button>
102      <button type="button" class="button-d col-2 ml-1 btn btn-primary w-25">冥府級</button>
103   </div> <!---- difficulty level -->
104
105   <div id="answer"class="row fixed-bottom flex-row row-cols-2 justify-content-center">
106    <div type="button" class="answer col py-2  px-0">選択肢１</div>
107    <div type="button" class="answer col py-2  px-0">選択肢２</div>
108    <div type="button" class="answer col py-2  px-0">選択肢３</div>
109    <div type="button" class="answer col py-2  px-0">選択肢４</div>
110  </div> <!---- answer -->
111
112      <img class="smile position-absolute bottom-0 start-0"  src="smile.png" alt="">
113
114      <img class="sleep position-absolute bottom-0 start-0"  src="sleep.png" alt="">
115
116  </div><!---- container -->
117
118  <script src="quiz.js"></script>
119
120</body>
121
122</html>

JavaScript
1const question=document.getElementById("question")
2const answer=document.getElementById("answer")
3const button=document.getElementsByClassName("button-d")
4
5const questionOriginal=question.style.visibility;
6const answerOriginal=answer.style.visibility;
7
8question.style.visibility = "hidden";
9answer.style.visibility = "hidden";
10
11
12button.onclick = function() {
13    button.style.visibility ="hidden";
14    question.style.visibility=questionOriginal;
15    answer.style.visibility=answerOriginal;
16  };