取得した値の条件分岐について

HTMLに入力された任意の値を取得し、イベントハンドラを使って、値が50未満の場合は「はい」50以上の場合は「いいえ」と表示されるようにしたい。

HTML
1

JavaScript

###"q4input"にどんな数字を入力しても表示される結果が「はい」になってしまいます。エラーメッセージは表示されなかったので尚更原因が分からず、いろいろ調べて試行錯誤しましたがどうしても正常に実行されません。原因が分かる方いらっしゃいましたらご教示お願いします。

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

回答3件

html
1<!DOCTYPE html>
2<html lang="jp">
3    <head>
4        <meta charset="UTF-8" />
5        <title>number compare</title>
6    </head>
7    <body>
8        <p class="q-body">
9            <input id="q4input" type="number" size="4">
10            <button id="q4-btn">判定</button><br>
11            50より小さい？：<span id="q4result"></span>
12        </p>
13
14        <script>
15            var btn4 = document.getElementById("q4-btn"); // "q4-btn"のDOM要素の取得
16            var elm4 = document.getElementById("q4result"); // "q4result"のDOM要素の取得
17            btn4.onclick = click4; // btn4のonclickプロパティにイベントハンドラを設定
18            function click4(){ 
19                var input4 = document.getElementById("q4input").value;
20                if (input4 < 50) {
21                    elm4.textContent = `はい`;
22                } else {
23                    elm4.textContent = `いいえ`;
24                }
25            }
26        </script>
27    </body>
28</html>

投稿2020/07/30 20:29

nekora

総合スコア501

ベストアンサー

こんな感じかと思います。間違えてたらすみません。

JavaScript
1var btn4 = document.getElementById("q4-btn"); // "q4-btn"のDOM要素の取得
2var elm4 = document.getElementById("q4result"); // "q4result"のDOM要素の取得
3btn4.onclick = click4; // btn4のonclickプロパティにイベントハンドラを設定
4function click4(){ 
5var input4 = document.getElementById("q4input").value;
6　　　　if (Number(input4) < 50) {
7　　　　　　　elm4.textContent = `はい`;
8　　　　} else {
9　　　　　　　elm4.textContent = `いいえ`;
10　　　　}
11}
12

投稿2020/07/30 19:29

Jon_do

総合スコア1373

momomomon

2020/07/30 19:41 編集

あ！できました！！！すごくスッキリしました。本当に助かりましたありがとうございます！！！

Jon_do

2020/07/30 19:51

すみません意味がよく分かりませんでした上で書いたコードにも var input4 = document.getElementById("q4input").value; とあるようにgetElementById("q4input").value; を使っています。もう一つ Number(input4)でなくinput4のままでも大丈夫かもしれません

nekora

2020/07/30 20:36 編集

質問者のコードを右上のコピーボタンでコピペして修正しようとしたらif文の中のインデントが全角スペースになっていました。これが正しく動かなかった原因と思われます。またjavascriptは型の自動変換が行われるので（これが場合によっては悪影響を引き起こす場合もありますが）今回に限ってはNumberしなくても動作すると思います。あとJon_doさんがなさってるように値はイベントハンドラの中で拾うようにしてくださいでないと、値をいれてクリックイベントが発生するまでの間に別のコードなどで値が変わると正しく動作しなくなります。あと<input>タグには</input>と言うような閉じタグはありません。 <input type="number">としてやれば確実に数値が入ってくるから型変換の心配からも開放されます。それからJon_doさんもif分のなかのインデントが全角スペースのままになっています。直したのを投稿しておきます。

momomomon

2020/07/30 20:44

Jon_doさん見間違いでコメントしてしまったのに気付いて修正しましたが、ご覧になってたんですね！ごめんなさい…！！！完全に納得し、解決しました。本当にありがとうございます！ nekoraさんとてもわかりやすい回答ありがとうございます！とても勉強になりました。以後気を付けます！たぶんまだまだ分からないことが出てくると思うのです、また機会があればよろしくお願いします…！

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

if (number4〜
number4ではなくinput4ではないでしょうか？
あとinput4であったとしても数値としてではなく
文字として扱われると思いますので
Number(input4)みたいな感じで数値に変換する必要があると思います。

投稿2020/07/30 19:10

Jon_do

総合スコア1373