javascriptのif文を使ってhtmlのclickイベントを操作したいが、条件に応じた操作の分岐がなされない

前提・実現したいこと

htmlに３つの要素を作成し、各要素にonclickを設定し、かつ、javascriptのif文を使うという条件つきで、clickする要素に応じて、alertを表示させたいと考えています。具体的には、３つ目の要素でclickした時には”正解”を、1,2番目の要素をクリックした時には”不正解”が表示されるようにしたいです。

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

①三つ目の要素をクリックした場合に、以下のようなエラーが出る場合と、エラーが発生せずに
"正解"のアラートが表示される場合がある。

if_practice.js:4 Uncaught TypeError: Cannot set property 'id' of null
    at color (if_practice.js:4)
    at HTMLHeadingElement.onclick (if_practice.html:13)

②一つ目及び二つ目の要素をクリックした場合、"正解"のアラートが表示される。

該当のソースコード

javascript
1"use strict";
2function color(){
3    var right = document.getElementById("white");
4    right.id = "clicked";
5}
6function message(){
7    //var notClicked = document.getElementsByClassName("white");
8    var notClicked = document.querySelector(".white");
9    if(notClicked.id === "clicked"){
10        alert('正解');
11    }else{
12        alert('不正解');
13    }
14}

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>JavaScriptの</title>
7</head>
8<body>
9    <p>JavaScriptの条件分岐</p>
10    <h1>雲の色は何色でしょうか（該当するものをクリック）。</h1>
11    <h2 id="red" onclick="message()">1.赤</h2>
12    <h2 id="yellow" onclick="message()">2.黄</h2>
13    <h2 id="white" class="white" onclick="color();message();">3.白</h2>
14    <script src="js/if_practice.js"></script><!--//フォルダ名jsの中のtask_if_1.jsというファイルを読み込む-->
15</body>
16</html>

試したこと

元々querySelectorではなく、getElementsByClassNameを使っていましたが、
getElementsByClassNameですと要素そのものを取得できないというご指摘を受けたことから、
今回はquerySelectorを使うべきなのではないかと考え、使ってみました。
何度か要素をクリックして動作確認したところ、前述の問題点である、３つ目の要素でエラーが出力される場合とされない場合があるということに気がつきました。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答3件

自己解決

①以下のコードを作成し、実現できました。

javascript
1"use strict";
2function color(){
3    //var right = document.getElementById("white");
4    var right = document.querySelector(".white");
5    right.classList.remove("white");
6}
7function message(){
8    //var notClicked = document.getElementsByClassName("white");
9    //var notClicked = document.querySelector(".white");
10    if(document.querySelector(".white")){
11        alert('不正解');
12    }else{
13        alert('正解');
14        var right = document.getElementById("white");
15        right.classList.add("white");
16    }
17}

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>JavaScriptの</title>
7</head>
8<body>
9    <p>JavaScriptの条件分岐</p>
10    <h1>雲の色は何色でしょうか（該当するものをクリック）。</h1>
11    <h2 class="red" onclick="message()">1.赤</h2>
12    <h2 class="yellow" onclick="message()">2.黄</h2>
13    <h2 class="white" id="white" onclick="color();message();">3.白</h2>
14    <script src="js/if_practice.js"></script><!--//フォルダ名jsの中のtask_if_1.jsというファイルを読み込む-->
15</body>
16</html>

②修正した点
（１）3つめの要素がクリックされた場合のみ作動する、classを取得し、そのクラスを削除する関数を作る
（２）クラスの存否を条件式にするif文を作成し、”正解”アラートを表示させる場合には、表示させたあとに
再び3つめの要素に(1)と同じclassを追加する処理を含ませる。

投稿2020/12/25 02:56

komattakomatta

総合スコア16

どうせjsの判断であれば答えはバレるので、
正解かどうかhtml要素に埋め込んでしまうという考え方もあります

投稿2020/12/25 00:37

yambejp

総合スコア116724

yambejp

2020/12/25 00:38 編集

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

idがwhiteからclickedに変わったのでdocument.getElementById("white");で見つけられなくなってます。
というかidは要素の重複してはいけない名前であって、そのように状態を表すためにコロコロと変えていいものではありません。

そういうときはクラスを使うことが多いです。
クラスはその要素がどんな集団に属しているのかを表します。IDと違って複数の要素が同じクラスを持ち、一つの要素が複数のクラスを持つことができます。

例えばred,yellow,whiteはすべて選択肢であるので、choicesクラスをつけ、さらにwhiteは正解選択肢なので、correctクラスもつける、といった具合です。

これを利用して、クリックした要素がクラスにcorrectを含んでいたら正解と表示する、という風にすると次のようにかけます。
onclick中にthisを書くと、thisはそのクリックした要素になります。例ではそれをmessageの引数に渡してobjに代入されています。

html
1<h2 id="red" class="choices" onclick="message(this)">1.赤</h2>
2<h2 id="yellow" class="choices" onclick="message(this)">2.黄</h2>
3<h2 id="white" class="choices correct" class="white" onclick="message(this);">3.白</h2>

js
1function message(obj) {
2  if (obj.classList.contains("correct") {
3    alert('正解');
4  }else{
5    alert('不正解');
6  }
7}

ちなみに実はonclickをhtmlに直接書くのもあんまりよくないです。
js側で、choicesクラスを持つ要素すべてに、クリックしたときに正解かどうか判定する機能をつけるようにすると以下のようになります。

html
1<h2 id="red" class="choices">1.赤</h2>
2<h2 id="yellow" class="choices">2.黄</h2>
3<h2 id="white" class="choices correct">3.白</h2>

js
1for (var obj of document.querySelectorAll(".choices")) {
2  obj.addEventListener("click", function (event) {
3    var obj = event.currentTarget;
4    if (obj.classList.contains("correct")) {
5      alert('正解');
6    }else{
7      alert('不正解');
8    }
9  });
10};