質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
if

if文とは様々なプログラミング言語で使用される制御構文の一種であり、条件によって処理の流れを制御します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

452閲覧

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

momomomon

総合スコア13

if

if文とは様々なプログラミング言語で使用される制御構文の一種であり、条件によって処理の流れを制御します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/07/30 17:23

編集2020/07/30 21:40

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

HTML

1

JavaScript

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

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

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さん とてもわかりやすい回答ありがとうございます!とても勉強になりました。以後気を付けます!たぶんまだまだ分からないことが出てくると思うのです、また機会があればよろしくお願いします…!
guest

0

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

投稿2020/07/30 19:10

Jon_do

総合スコア1373

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

momomomon

2020/07/30 19:22

あ!試行錯誤している過程で打ち間違えてしまいました…申し訳ありません…。(修正済) Jon_doさんがおっしゃる通りif文の前に"Number(input4)"を入れてみましたが、それでも全ての結果が「はい」になってしまいます…
Jon_do

2020/07/30 19:25

もう一点 var input4 = document.getElementById("q4input").valueは function click4(){ の中に入れる必要があるかと思います。 でないと、読み込んだ時の何も入力されてない状況が読み込まれますので
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問