Q&A
前提・実現したいこと
htmlに３つの要素を作成し、各要素にonclickを設定し、かつ、javascriptのif文を使うという条件つきで、clickする要素に応じて、alertを表示させたいと考えています。具体的には、３つ目の要素でclickした時には”正解”を、1,2番目の要素をクリックした時には”不正解”が表示されるようにしたいです。
発生している問題・エラーメッセージ
どの要素をクリックしても、”不正解”アラートが表示されます。
該当のソースコード
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 if(notClicked.id === "clicked"){ 9 alert('正解'); 10 }else{ 11 alert('不正解'); 12 } 13}
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>
試したこと
ブラウザ（chrome）の検証機能で、javascriptファイルの3行目にブレークポイントを設定し、stepoverをしました。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答1件
0
ベストアンサー
こんばんは。
getElementsByClassName()は要素を返さないことが原因だと思います。
var test = parentDOM.getElementsByClassName("test"); // 一致する要素のリストであり、要素自身ではない
var testTarget = parentDOM.getElementsByClassName("test")[0]; // 求める最初の要素
投稿2020/12/24 09:47
総合スコア36946
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/12/24 12:09