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

前提・実現したいこと

javascriptのif文を使って、htmlの要素に対してclickイベントを作動させたいと思っています。

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

どの要素をクリックしても、同じ表示がなされる(全部”正解”と表示されてしまう)

該当のソースコード

javascript
1"use strict";
2var elem1 = document.getElementById("hokkaido").onclick;
3var elem2 = document.getElementById("hukuokaken").onclick; 
4var elem3 = document.getElementById("toukyouto").onclick;
5function capitalCity(){
6    if(elem1){
7        alert('正解');
8    }else{
9        alert('不正解');
10    }
11}

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 onclick=capitalCity() id="hokkaido">1.北海道</h2>
12    <h2 onclick=capitalCity() id="hukuokaken">2.福岡県</h2>
13    <h2 onclick=capitalCity() id="toukyouto">3.東京都</h2>
14    <script src="js/if_practice.js"></script><!--//フォルダ名jsの中のtask_if_1.jsというファイルを読み込む-->
15</body>
16</html>

試したこと

javascriptのif文の()の中に"==true"を追加した(→この場合には、全部不正解と表示された）
などです。

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

イベントハンドラとif文に関して、仕組みの捉え方が間違っている可能性を考えています。

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

回答1件

ベストアンサー

var elem1 = document.getElementById("hokkaido").onclick;

これは明らかにおかしいです、せめて

var elem1 = document.getElementById("hokkaido")

で、これをif(elem1)してどうするつもりでしょうか？
クリックしたHTML要素がelem1だったらといことでしょうか？

投稿2020/12/24 06:03

yambejp

総合スコア116694

yambejp

2020/12/24 06:06

<h2 onclick="capitalCity(this)" id="hokkaido">1.北海道</h2> のようにして function capitalCity(obj){ if(obj==elem1){ alert('正解'); }else{ alert('不正解'); } } のような動作が希望ですか？それにしてもちょっと非効率なQ&A処理になりますが

komattakomatta

2020/12/24 06:16 編集

ご回答いただき、誠にありがとうございます。実現したいことにつき、情報が不足しており、失礼いたしました。今回は、"3.東京都"の要素部分をクリックした場合に、"正解"のアラートを表示させ、その他２つの要素をクリックした場合には、"不正解"のアラートを表示させたいと思っています。そのような動作をするためには、どのように修正すべきなのでしょうか。よろしくお願いします。

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