JavaScript　数字の判定

前提・実現したいこと

HTMLでインプットと判定ボタンで数字かどうかの判定の仕方に躓いてます。
値が数字以外のときは「数字を入力してください」と表示する。
値が数字のときは　何も表示しません。その際、出力された値の初期化もしたいです。
お願いします。

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

コードを読み解く力もなくボタンを押しても読み込まれません。
ボタンを押したときに“数字を入力してください”って画面に出るのにはどうしたらいいですか？

該当のソースコード

試したこと

<!DOCTYPE html> <html> <head> <title>JavaScript</title> <meta charset="UTF-8"> <script> var check = function() { var num = document.getElementById('input01').value; messageArea.innerText = ""; var isNum = !isNaN(value)

if(!isNaN(num)){
  messageArea.innerText();
} else {
  messageArea.innerText("数値以外が入力されています");
}
}

</script> </head> <body> <input type="text" value="" id="input01"> <input type="button" value="判定" onclick="check();"> </body> </html>

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

anozon

2021/08/07 03:39

マイナスや小数点はどう扱いますか？ "100" は数値 "a10" は数値じゃないなど満たしたいパターンを書き出してほしいですまた根本的に <input type="number" /> で解決する問題だったりはしますか？

think49

2021/08/07 03:49

isNaN()で数字の判定は出来ているはずです。何がどう期待通りでないのか、具体的に質問しましょう。

Lhankor_Mhy

2021/08/07 04:03

もしかして、全角数字で入力してないですか？

退会済みユーザー

2021/08/07 04:55

こちらのサイトの使い方がまだうまくできないのですが作りたいものを画像貼れたら今から試してみます。

Lhankor_Mhy

2021/08/07 04:58

つまり、現状のアラートではなくて、メッセージをHTML上に表示したい、ということですか？

退会済みユーザー

2021/08/07 05:13

そうですね。判定はできていそうなのでメッセージをHTMLに表示の方法をお願い致します。

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

回答2件

ベストアンサー

<!DOCTYPE html> <html> <head> <title>JavaScript</title> <meta charset="UTF-8"> </head> <body> <script> function checkEven() {

var v = document.getElementById("number").value;
var r = document.getElementById("result");

r.innerText = "";


if (isNaN(v)) {
  r.textContent   ="数値以外が入力されています";
} else {
  r.textContent
}

}
</script>
<input id="number">
<button onclick="checkEven()">判定</button>
<p id="result"></p>

</body> </html>

投稿2021/08/08 04:35

退会済みユーザー

総合スコア0

think49

2021/08/08 05:40 編集

@shomaree さん innerText で消してから、textContent で挿入するのはなぜでしょう？ } else { r.textContent } にはどんな意図がありますか？ ※markdownでコードブロックを使うと、読む人にやさしい質問/回答になると思います。 https://teratail.com/help#about-markdown https://qiita.com/Qiita/items/c686397e4a0f4f11683d#code---%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E6%8C%BF%E5%85%A5

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

こんな感じでいかがでしょうか？

HTML
1<html>
2  <head>
3    <title>数字チェック</title>
4    <script>
5      function checkNum(tb) {
6         var messageArea = document.getElementById("messageArea");
7
8         // メッセージクリア
9         messageArea.innerText = "";
10
11         // 数字チェック
12         var isNum = !isNaN(tb.value);
13
14         // チェック方法は多数あり。用途に合わせて使い分けてみて。
15         // https://qiita.com/taku-0728/items/329e0bee1c49b7ce7cd1
16
17         // チェック結果の表示
18         if(isNum) {
19          messageArea.innerText = "";
20         } else {
21          messageArea.innerText = "数値以外が入力されています";
22         }
23      }
24    </script>
25  </head>
26  <body>
27    <form name="f">
28      <div><input name="num" type="text" value="" onkeyup="checkNum(this);"/></div>
29      <div><span id="messageArea"></span></div>
30    </form>
31  </body>
32</html>