Q&A
ありがとうございます。
おっしゃる通りです。
条件を考え直してみます。
前提・実現したいこと
inputタグの入力値が整数以外（空白や少数、文字列）の時にエラーを表示したい
ここに質問の内容を詳しく書いてください。
現在、FizzBuzz問題を解いているのですが、
入力されたものに対して、エラーを表示させ、整数値を入力するように促すようにしたいと思っています。しかし、現在のコードでは、空白を入れるとよくできましたとなり、数値を入れると、整数値を入れてくださいとなります・・・
コードのどこがおかしいのか、教えていただけませんか
補足
該当のソースコード
JavaScript
1 2ソースコード 3<!DOCTYPE html> 4<html lang="ja"> 5 <head> 6 <meta charset="UTF-8"> 7 <link> 8 <title>JavaScript課題②</title> 9 <link rel="stylesheet" href="css/styles.css"> 10 </head> 11 <body> 12 <h1>FizzBuzz問題</h1> 13 <p>FizzNum ：<input type="text" id="fizzInput" value=""></p> 14 <p>BuzzNum：<input type="text" id="buzzInput" value=""> </p> 15 <button id="btn">実行</button> 16 <div id="error"></div> 17 <script> 18 19 'use strict' 20 { 21 22 const fizzForm = document.getElementById('fizzInput'); 23 const buzzForm = document.getElementById('buzzInput'); 24 const btn = document.getElementById('btn'); 25 26 btn.addEventListener('click',function () { 27 const fizzNum = parseFloat(fizzForm.value); 28 const bussNum = parseFloat(buzzForm.value); 29 let Error = "整数値を入力してください！"; 30 let Perfect = "よくできました"; 31 if(fizzNum === "" || bussNum === "") { 32 document.getElementById('error');textContent = Error ; 33 } else if (Number.isInteger(fizzNum) && Number.isInteger(bussNum)){ 34 document.getElementById('error').textContent = Error ; 35 }else { 36 document.getElementById('error').textContent = Perfect; 37 } 38 } 39 )} 40 </script> 41</body> 42 43</html>
回答4件
0
コードのどこがおかしいのか、教えていただけませんか
条件分岐が間違っています。Number.isInteger(fizzNum) && Number.isInteger(bussNum)のときにErrorの表示を行っているのは、何を意味してのことでしょうか。
なお、ErrorはJavaScript標準で存在するオブジェクトです。別な変数の名前に使うことはおすすめできません。
投稿2020/05/16 09:30
総合スコア146018
0
まず、parseFloat() に空白を渡すと NaN（Not a Number）が返されます。
空白かどうかの判定をparseFloat() の前に入れれば回避できるでしょう。
また、以下コードは「整数の場合、エラーとする」ような処理になっていませんか？
JavaScript
1} else if (Number.isInteger(fizzNum) && Number.isInteger(bussNum)){ 2 document.getElementById('error').textContent = Error ;
投稿2020/05/16 09:29
総合スコア134
0
まず、定数が少しおかしかったので修正しました。
bussNum→buzzNum(他のidや定数は、buzzだったので）
アドバイスいただいた通り、条件分岐を見直し、
JavaScript
1if ( Number.isInteger(fizzNum) && Number.isInteger(buzzNum))
この条件がtrueの時に、よくできましたと出力するようにしました。
また、『ErrorはJavaScript標準で存在するオブジェクトです。別な変数の名前に使うことはおすすめできません。』
とのご指摘より、Etextと変更しました。
そして、『parseFloatは数値になり得る場合は数値を返し、それ以外はNaNを返すからです。』との回答を参考に、
parseFloatよりも前に空白であるかどうかの処理を行うように変更しました。
JavaScript
1btn.addEventListener('click',function () { 2 const fizzForm = document.getElementById('fizzInput').value; 3 const buzzForm = document.getElementById('buzzInput').value; 4 if(fizzForm === "" || buzzForm === "" ) { 5 let Etext = "整数値を入力してください！"; 6 let Perfect = "よくできました"; 7 8 document.getElementById('Mtext').textContent = Etext ;
自分の求めていた形になったように思います。
3名の方、ご回答いただき、ありがとうございました。
JavaScript
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <link> 6 <title>JavaScript課題②</title> 7 <link rel="stylesheet" href="css/styles.css"> 8 </head> 9 <body> 10 <h1>FizzBuzz問題</h1> 11 <p>FizzNum ：<input type="text" id="fizzInput" value=""></p> 12 <p>BuzzNum：<input type="text" id="buzzInput" value=""> </p> 13 <button id="btn">実行</button> 14 <div id="Mtext"></div> 15 <script> 16 17 'use strict' 18 { 19 20 21 const btn = document.getElementById('btn'); 22 23 btn.addEventListener('click',function () { 24 const fizzForm = document.getElementById('fizzInput').value; 25 const buzzForm = document.getElementById('buzzInput').value; 26 if(fizzForm === "" || buzzForm === "" ) { 27 let Etext = "整数値を入力してください！"; 28 let Perfect = "よくできました"; 29 30 document.getElementById('Mtext').textContent = Etext ; 31 } else { 32 const fizzNum = parseFloat(fizzForm); 33 const buzzNum = parseFloat(buzzForm); 34 35 if ( Number.isInteger(fizzNum) && Number.isInteger(buzzNum)) { 36 let Perfect = "よくできました"; 37 document.getElementById('Mtext').textContent = Perfect; 38 }else { 39 let Etext = "整数値を入力してください！"; 40 document.getElementById('Mtext').textContent = Etext ; 41 } 42 } 43 } 44 )} 45 </script> 46</body> 47 48</html>
投稿2020/05/16 13:55
総合スコア8
0
ベストアンサー
if文を一つずつ辿ればわかると思います。
js
1if(fizzNum === "" || bussNum === "") {
これがtrueになることはありません。
parseFloatは数値になり得る場合は数値を返し、それ以外はNaNを返すからです。
（[NaN === ""] => false)
参考：parseFloat、NaN
NaNに関しては結構ややこしいので、===ではなくisNaNを使って比較するのが一般的になると思います。
js
1} else if (Number.isInteger(fizzNum) && Number.isInteger(bussNum)){
Number.isIntegerは引数が"整数"の時にtrueを返します。また２つを&&で結合しているので、両方がtrueの時にtrueとなります。
さて、質問の方ですが、
＞空白を入れるとよくできましたとなり、数値を入れると、整数値を入れてくださいとなります
まず空白を入れた際は、ifはfalseなのでelseifの方ですが、空白はfalseなのでelseに行き、
js
1document.getElementById('error').textContent = Perfect;
つまり「よく出来ました」と出ます。
同様に、数値の場合も、elseの方で、（両方とも整数を入れていた場合は）trueを返してしまうので、
js
1document.getElementById('error').textContent = Error ;
つまり、「整数値を入力してください！」が表示されてしまいます。
ある教材の問題ということで、解答まで答えるのは如何と思うのでここまでしか答えれませんが、解く上でのヒントになれば。
投稿2020/05/16 09:40
総合スコア1139
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/05/16 09:36