javascriptのswitch文を使い（if文は使わず）、htmlのonclickイベントとして、問いに対する解答を表示する要素をcreateし、一度解答を表示させたら、その後はその要素の内容を

前提・実現したいこと

javascriptのswitch文を使い（if文は使わず）、htmlのonclickイベントとして、問いに対する解答を表示する要素をcreateし、一度解答を表示させたら、
その後はその要素の内容を書き換える形でonclickイベントを発生させたいです。

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

要素が書き換えられるのではなく、onclickイベントを設定している要素を選択すると、新規に要素が追加されていってしまう。

該当のソースコード

javascript
1"use strict";
2var change;
3function changeRed(){
4    change = 1;
5}
6function changeBlue(){
7    change = 2;
8}
9function changeYellow(){
10    change = 3;
11}
12function remove(){
13    var element =document.querySelector(".answered");
14    switch(element){
15        case false:
16            resultAnswer();
17            break;
18        case true:
19            element.remove();
20            resultAnswer();
21            break;
22        default:
23            resultAnswer();
24    }
25}
26function resultAnswer(){
27    var result;
28    switch(change){
29        case 1:
30            result = "不正解①";
31            var tag = document.createElement("p");
32            tag.classList.add('answered');
33            var text = document.createTextNode(result + "です。");
34            document.body.appendChild(tag).appendChild(text);
35            break;
36        case 2:
37            result = "不正解②";
38            var tag = document.createElement("p");
39            tag.classList.add('answered');
40            var text = document.createTextNode(result + "です。");
41            document.body.appendChild(tag).appendChild(text);
42            break;
43        case 3:
44            result = "正解";
45            var tag = document.createElement("p");
46            tag.classList.add('class1');
47            var text = document.createTextNode(result + "です。");
48            document.body.appendChild(tag).appendChild(text);
49            break;
50    }
51}
52

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>SWITCH文①</p>
10    <p>レモンの色は何色でしょうか</p>
11    <p id="red" class="red" onclick="changeRed();remove();">赤です</p><br>
12    <p id="blue" class="blue" onclick="changeBlue();remove();">青です</p><br>
13    <p id="yellow" class="yellow" onclick="changeYellow();remove();">黄です</p><br>
14    <script src="js/practice.js"></script><!--//フォルダ名jsの中のtask_switch_1.jsというファイルを読み込む-->
15</body>
16</html>

試したこと

jsの２２行目（remove()のswitch文）にdefaultを入れて操作したところ、falseとtrueには反応していないことがわかりました。

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

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

m.ts10806

2020/12/28 04:56

そもそもquerySelector()の返りはelement / null なのですが、そこから間違えてませんか？

komattakomatta

2020/12/28 05:29

ご回答いただき、ありがとうございます。 caseをfrue/falseにしていたところ、element/nullにして試してみました。結果、期待通りの動きになりました。 caseに何を設定すれば良いのかについてもわかっていなかったのですが、今回の場合、querySelector()が返すものが何なのかを調べて、返すものを設定するべきということがわからないといけなかったということなのですね。ありがとうございました

m.ts10806

2020/12/28 05:40

こちらは回答欄でははなく、質問への追記修正依頼です。主に質問内容の不備を指摘し、質問の正規化をしてもらうコメント欄として使われます。 >返すものが何なのかを調べて今回に限らず「機能が何をしているものなのかドキュメントを確認する」「デバッグ」「エラーを読む」の3つをきちんとできれば大抵は質問する前に解決します。

m.ts10806

2020/12/28 05:42

ちなみに定数のような決まりきった値を比較するのではない場合、switchは使えませんし、向きません。true/falseの判定も「2択」と言えますし、nullは結局nullでしかないので。

komattakomatta

2020/12/28 05:52

>こちらは回答欄でははなく、質問への追記修正依頼です。 >主に質問内容の不備を指摘し、質問の正規化をしてもらうコメント欄として使われます。 →「ご回答いただき、」というのは誤りでした。ご指摘いただき、ありがとうございます。 >今回に限らず「機能が何をしているものなのかドキュメントを確認する」「デバッグ」「エラーを読む」の>3つをきちんとできれば大抵は質問する前に解決します。 →特に一つ目をやろうとしていなかったことを一番反省いたします。＞ちなみに定数のような決まりきった値を比較するのではない場合、switchは使えませんし、向きません。＞true/falseの判定も「2択」と言えますし、nullは結局nullでしかないので。 →承知いたしました。

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

回答1件

ベストアンサー

最小限の変更で済ませる形ですが、下記のように、
単純に回答用のエリアを用意しておいて、そこを変えればいいのではないでしょうか？

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>SWITCH文①</p>
10    <p>レモンの色は何色でしょうか</p>
11    <p id="red" class="red" onclick="changeRed();remove();">赤です</p><br>
12    <p id="blue" class="blue" onclick="changeBlue();remove();">青です</p><br>
13    <p id="yellow" class="yellow" onclick="changeYellow();remove();">黄です</p><br>
14    <p id="answer" class="answer"></p><br>    <!---------------------------追加---------->
15    <script src="js/practice.js"></script><!--//フォルダ名jsの中のtask_switch_1.jsというファイルを読み込む-->
16</body>
17</html>

javascript
1"use strict";
2var change;
3function changeRed(){
4    change = 1;
5}
6function changeBlue(){
7    change = 2;
8}
9function changeYellow(){
10    change = 3;
11}
12function remove(){
13    var element =document.querySelector(".answered");
14    switch(element){
15        case false:
16            resultAnswer();
17            break;
18        case true:
19            element.remove();
20            resultAnswer();
21            break;
22        default:
23            resultAnswer();
24    }
25}
26// 下記の関数を変更------------------------------------
27function resultAnswer(){
28    var result;
29    switch(change){
30        case 1:
31            result = "不正解①";
32            break;
33        case 2:
34            result = "不正解②";
35            break;
36        case 3:
37            result = "正解";
38            break;
39        
40    }
41    document.getElementById("answer").innerHTML = result + "です。";
42}