Q&A
自力実装する前に実装したい機能と同じ機能が存在しないかをぐーぐる先生に聞いてみるといいですよ
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Number/isInteger
勉強のために作っているのなら気にしなくてこのコメントは気にしなくて結構です
実現したいこと
ボタンをクリックし、inputタグに入力された文字列が...
・整数値なら、アラートで「整数値です」
・整数値でなければ、アラートで「整数値ではありません」
と表示させたい。
発生している問題
HTMl
1<body> 2<input id="fizz" type="text" size="23" placeholder="整数値を入力してください" /> 3<input id="btn" type="button" value="実行" /> 4 5<script src="test.js"></script> 6</body>
JavaScript
1//inputのidを取得 2const fizzNum = document.getElementById('fizz'); 3 4//整数をチェックする関数 5function isNumber(numVal){ 6 var pattern = /^[-]?([1-9]\d*|0)(.\d+)?$/; 7 return pattern.test(numVal); 8 } 9 10//戻り値を変数に格納 11 let integerCheck = isNumber(fizzNum); 12 13//クリック時の処理 14btn.addEventListener('click', () => { 15 if (integerCheck == true) { 16 alert('整数値です'); 17 } else if (integerCheck == false) { 18 alert('整数値ではありません'); 19 } 20}, false);
整数値を入力しているのに、「整数値ではありません」のアラートが出現してしまう。
## 個人的な考え
関数の引数に問題があると考える。
引数のinputタグで入力される値は文字列なので、そのせいでおかしくなっている。
回答3件
0
整数の定義次第ですね
- 「0123」的な8進数の整数
- 「12e3」のような精度表記の整数(?)
- 「123.0」のような小数点をもった実質整数(?)
単純に数値のチェックだとこんな感じ
javascript
1<script> 2window.addEventListener('DOMContentLoaded', ()=>{ 3 document.querySelector('#btn').addEventListener('click',()=>{ 4 var v=document.querySelector('#fizz').value; 5 var view=document.querySelector('#view'); 6 view.textContent=/^([1-9]+\d*|0)$/.test(v)?"ok":"ng"; 7 }); 8}); 9console.log(0123); 10console.log(12e3); 11console.log(123.0); 12</script> 13<input id="fizz" type="text" size="23" placeholder="整数値を入力してください"> 14<input id="btn" type="button" value="実行"> 15<div id="view"></div> 16
投稿2020/07/19 02:13
総合スコア118164
バリデーションはともかくinput要素なら
type="number"とか、patternの設定とかで弾くことはできます
ありがとうございます。
今回は自己成長のためにtype="number"を使わずに実装したかったので"text"を採用しました。
8進数のことを考えていなかったので、次はそこも意識してトライしてみます。
0
関数の引数に問題があると考える。
いいえ。
まず「ボタンクリックしたとき」の値をチェックしていません。
画面読み込んだときの値になってるので、何も初期値なければ空ですよね。
もう1点。
document.getElementById('fizz')そのまま突っ込んでるので、「入力値」ではなく「要素そのもの」に対するチェックになってます。
上記2点、対応してみてください。
投稿2020/07/19 00:02
総合スコア80890
「ボタンをクリックした時」の値のチェックというのは、addEventListenerの第２引数を用いてチェックするのでしょうか？
まず、やってみてください。
「クリック時の処理に書いていない」という指摘ですが、どのときにどこを通っているかデバッグしてみれば分かります。
0
ベストアンサー
まずは自分ならこうするという実例です。
<script> //整数をチェックする関数 const checkNum = () => { //クリックされた時点でのfizzに入力された値 const num = document.getElementById('fizz').value; //入力された文字列が0以上の半角数字であるならば //「整数値です」と表示、違うのであれば「整数値ではありません」と表示 // ※今回は001 0200 などは許容しないようにしています。 num.match(/^([1-9]\d*|0)$/) ? alert('整数値です') : alert('整数値ではありません'); } //クリック時の処理 btn.addEventListener('click', () => { checkNum(); }, false); </script>/追記/
元のコードを修正してみました。
投稿2020/07/19 02:35
編集2020/07/19 03:39
総合スコア1373
ありがとうございます。
昨日ずっと調べている中で(yambeさんの回答もですが）
? alert('整数値です') : alert('整数値ではありません');
という表記を見たことなかったので、とても勉強になりました。
元のコードを修正したものを追加しましたのでそちらも
見てみてください。回答もそうですが、どこか間違えている可能性も捨てきれませんので
ご注意を。
懇切丁寧にありがとうございます。
ご教示いただいた内容を元に色々試してみたいと思います。
あなたの回答
tips
プレビュー
