画像の位置の変更ができない

前提・実現したいこと

難易度のボタンをクリックした際にイラストの位置が少し上に移動する仕組みを作りたいのですが、作動しません。
検証したところ以下のエラーメッセージが出ました。JavaScriptのコードの32行目の$smile.style.bottomのbottomへのアクセスが不可能らしいのですが、何故不可能なのかがわかりません。画像の取得はできていました。
改善策をお願いします。

発生している問題・エラーメッセージ

Uncaught TypeError: Cannot set properties of undefined (setting 'bottom')

該当のソースコード

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        left:  30px;
61        bottom: 47px;
62        animation:
63        name1 3s step-end 0s infinite normal;
64        z-index: 2;
65      }
66
67      .sleep{
68        position: absolute;
69        left:  30px;
70        bottom: 47px;
71        z-index: 1;
72      }
73
74      @keyframes name1{
75        0%{ opacity:1; }
76        
77        35%{ opacity:0; }
78
79        40%{ opacity:1; }
80
81        80%{ opacity:0; }
82
83        85%{ opacity:1; }
84
85        95%{ opacity:0; }
86
87        100%{ opacity:1; }
88      }
89      
90      @media screen and (min-width: 481px) {
91	/* 481px以上に適用されるCSS（タブレット用） */
92      .smile{
93        position: absolute;
94        left:  50px;
95        bottom: 47px;
96        animation:
97        name1 3s step-end 0s infinite normal;
98        z-index: 2;
99      }
100
101      .sleep{
102        position: absolute;
103        left:  50px;
104        bottom: 47px;
105        z-index: 1;
106      }
107
108      }
109      @media screen and (min-width: 960px) {
110	/* 960px以上に適用されるCSS（PC用） */
111      .smile{
112        position: absolute;
113        left:  90px;
114        bottom: 47px;
115        animation:
116        name1 3s step-end 0s infinite normal;
117        z-index: 2;
118      }
119
120      .sleep{
121        position: absolute;
122        left:  90px;
123        bottom: 47px;
124        z-index: 1;
125      }
126
127      }
128    </style>
129
130<div class="p-4">
131</div><!---- space -->
132
133   <div id="top"class="container mt-5 py-5 px-0">
134
135   <div id="question" class="row justify-content-center">
136      <div id=questionText class="question fixed-top">問題文</div>
137    </div><!---- question -->
138
139   <div id="button-d"class="row flex-column d-flex align-items-center justify-content-center" style="margin:0;">
140      <h1 class="col-3 text-center mb-5">クイズ</h1>
141      <button type="button" id="easy"class="col-2 btn btn-primary mb-3 w-25">初級</button>
142      <button type="button" id="middle"class="col-2 ml-1 btn btn-primary mb-3 w-25">中級</button>
143      <button type="button" id="difficult"class="col-2 ml-1 btn btn-primary mb-3 w-25">上級</button>
144      <button type="button" id="hell"class="col-2 ml-1 btn btn-primary w-25">冥府級</button>
145   </div> <!---- difficulty level -->
146
147   <div id="answer"class="row fixed-bottom flex-row row-cols-2 justify-content-center">
148    <div type="button" id="choiseF" class="answer col py-2  px-0">選択肢１</div>
149    <div type="button" id="choiseS" class="answer col py-2  px-0">選択肢２</div>
150    <div type="button" id="choiseT" class="answer col py-2  px-0">選択肢３</div>
151    <div type="button" id="choiseFo" class="answer col py-2  px-0">選択肢４</div>
152  </div> <!---- answer -->
153
154      <img id="smile" class="smile position-absolute "  src="smile.png" alt="">
155
156      <img id="sleep" class="sleep position-absolute "  src="sleep.png" alt="">
157
158  </div><!---- container -->
159
160  <script src="quiz.js"></script>
161
162</body>
163
164</html>

JavaScript
1const $question=document.getElementById("question")//問題文の親要素
2const $answer=document.getElementById("answer")//選択肢の親要素
3const $button=document.getElementById("button-d")//難易度
4const $easy=document.getElementById("easy")//初級
5const $middle=document.getElementById("middle")//中級
6const $difficult=document.getElementById("difficult")//上級
7const $hell=document.getElementById("hell")//冥府級
8let $smile=document.getElementsByClassName("smile")//画像１
9let $sleep=document.getElementsByClassName("sleep")//画像２
10
11
12let $questionText=document.getElementById("questionText")//問題文
13let $answerW=document.getElementsByClassName("answer")//選択肢
14
15const answerLength=$answerW.length//選択肢の数
16
17
18
19const questionOriginal=$question.style.visibility;
20const answerOriginal=$answer.style.visibility;
21//表示用
22
23$question.style.visibility = "hidden";
24$answer.style.visibility = "hidden";
25//非表示
26
27
28$button.onclick = function() {
29    $button.style.visibility ="hidden";
30    $question.style.visibility=questionOriginal;
31    $answer.style.visibility=answerOriginal;
32    $smile.style.bottom = 97+"px";
33    $sleep.style.bottom = 97+"px";
34  };
35  //画面切り替え
36
37
38

試したこと

$smile.style.position="absolute"を追加→absoluteの部分に同じエラーが発生
let y=0を作りy+=30;と代入した後$smile.style.bottom=y+"px"と記入→変わらずbottomの部分に同じエラーが発生

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

回答2件

ベストアンサー

getElement s By ClassName とあるように、複数の要素を取得するためのメソッドなので、取得したものは要素自体ではなくそれを格納したHTMLCollection です。

要素が1つしかないのであれば、$smile[0].style.bottomで処理できますが、それ以上になった場合は複数の要素それぞれに処理をしていく必要があります。

【Document.getElementsByClassName() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByClassName

elements は、見つかった要素の生きた HTMLCollection です。

getElementByIdやgetElementsByClassNameを使うよりはquerySelector/querySelectorAllを使うほうが「クラスだからこれ」とか考えなくて良いのでお勧めです。

【Document.querySelector() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Document/querySelector

【Document.querySelectorAll() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll

投稿2021/09/10 08:33

kei344

総合スコア69606

bob-kitchin

2021/09/10 08:52

回答ありがとうございます。無事解決しました。 querySelectorやquerySelectorAllという取得方法があることは知らなかったので調べてみます。

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

js
1let $smile=document.getElementsByClassName("smile")
2
3//...
4
5$smile.style.bottom = 97+"px";

となっていますが、document.getElementsByClassName() の戻り値は Element ではなくて HTMLCollection ですので、style というプロパティはありません。配列風に添え字をつけてアクセスしてください。

MDNの以下の記事がわかりやすいです。
クラスが 'test' である最初の要素を取得する | Document.getElementsByClassName() - Web API | MDN

        var test = parentDOM.getElementsByClassName("test"); // 一致する要素のリストであり、要素自身では*ない*
        console.log(test); //HTMLCollection[1]

        var testTarget = parentDOM.getElementsByClassName("test")[0]; // 求める最初の要素
        console.log(testTarget); //<p class="test">hello world 2</p>

投稿2021/09/10 08:27