JavaScriptのclickイベントを使った簡単な問題

前提・実現したいこと

JavaScriptのclickイベントを使った問題を、if文による条件分岐も使用して作成したいです。

3択問題で、正解をクリックすると「正解」、間違いをクリックすると「ハズレ」と表示させたいです。

3つの選択肢にはidを指定し、addEventListenerを使用して作成したいです。

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

おそらく、if文の条件式が正しくないのが原因だと思うのですが、「1番がクリックされた時」という条件式をどう書けばいいのかがわかりません。

例えば下のままだと、最初の条件がtrueになる

該当のソースコード

var correct = '正解';
var mistake = '外れ';
var result = document.getElementById('result');

var elem1 = document.getElementById('element1');
var elem2 = document.getElementById('element2');
var elem3 = document.getElementById('element3');


if('ここがわからない'){
  elem3.addEventListener('click', function(){
  result.innerHTML = correct; 
}, false);
} else if('ここがわからない') {
  elem2.addEventListener('click', function(){
  result.innerHTML = mistake; 
  }, false);
} else if('ここがわからない') {
  elem1.addEventListener('click', function(){
  result.innerHTML = mistake; 
  }, false);
}

試したこと

var elem1 = document.getElementById('element1');
var elem2 = document.getElementById('element2');
var elem3 = document.getElementById('element3');

ここで選択肢を1つずつ取得しています。

m.ts10806

2021/04/16 21:22

>if文の条件式が正しくないのが原因自身で書いたコードを提示してください。本当に「ここが分からない」と書いたのですか？

m.ts10806

2021/04/16 21:22

あと、HTMLも提示してください

ku__ra__ge

2021/04/16 23:36

そもそもプログラムの構成がおかしいので'ここがわからない'に入るべき正しい内容は存在しません。（どんな内容を入れても正しい動作にはできない） addEventListenerがどのような機能を実現する処理なのか再確認してコードを組み直しましょう。

退会済みユーザー

2021/04/17 02:20

ありがとうございます。 html <body> <h3>信号の止まれは何色でしょうか？</h3> <p id="element1">1:青</p> <p id="element2">2:黄色</p> <p id="element3">3:赤</p> <p id="result"></p> JavaScriptは書き直して現在このようになっています var correct = '正解'; var mistake = '外れ'; var result = document.getElementById('result'); var elem1 = document.getElementById('element1'); var elem2 = document.getElementById('element2'); var elem3 = document.getElementById('element3'); elem3.addEventListener('click', function(){ if(elem3.id === 'element3'){ result.innerHTML = correct; } else { result.innerHTML = mistake; } }, false); 上記でわからない点は、選択肢のどれをクリックしても elem.addEventListener('click', function() を機能させる方法(上のままだと選択肢3を押した時しか機能しないのはわかります) 今はif文の条件式に elem3.id === 'element3' と入れていますが、「選択肢のどれかがクリックされたらif文に進む」ようにすればいいのか、「if文の条件式に、もし選択肢１がクリックされたら〜、もし選択肢２が〜」のように分岐させればいいのかがよくわからないです。よろしくお願い致します。

退会済みユーザー

2021/04/17 02:27

選択肢のどれかがクリックされたら(addEventListenerを使って){ if(){ } else{ }, false); なのか、 if(選択肢1がクリックされたら){ } else if(選択肢2がクリックされたら){ } else if(選択肢3がクリックされたら){ } 上のどっちかにすればいいのかなと考えていますが、最初の方なら押された選択肢を判別する方法がわからず、後の方なら()内に書く条件式がどのようになるのかがわからないです。

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

回答1件

質問者さんが必要としている知識は、以下のように切り分けられると思います。

クリックされたときに実行される処理内で、何がクリックされたのかを取得する方法
element1 または element2 または element3 がクリックされたときに実行される処理を登録する方法

クリックされたときに実行される処理内で、何がクリックされたのかを取得する方法

イベントが発生した要素は、以下のようにイベントが起きたときに実行される関数の引数から取り出すことができます。

javascript
1var elem1 = document.getElementById('element1');
2elem1.addEventListener('click', function(eventArgument){
3  var clickedElement = eventArgument.currentTarget;
4  alert(clickedElement.id);
5}, false);

element1 または element2 または element3 がクリックされたときに実行される処理を登録する方法

このような処理を行いたいときは、まずイベント発生時に実行する関数（自分で見て分かりやすい名前が良いですが、ここでは仮にsampleEventHandlerという名前の関数としましょう）を定義します。
そして、
element1がクリックされたときにsampleEventHandlerを実行する
element2がクリックされたときにsampleEventHandlerを実行する
element3がクリックされたときにsampleEventHandlerを実行する
……という登録をしてやるとよいです。

javascript
1function sampleEventHandler() {
2  alert('イベントが発生しました');
3}
4
5var elem1 = document.getElementById('element1');
6var elem2 = document.getElementById('element2');
7var elem3 = document.getElementById('element3');
8
9elem1.addEventListener('click', sampleEventHandler, false);
10elem2.addEventListener('click', sampleEventHandler, false);
11elem3.addEventListener('click', sampleEventHandler, false);