inputタグに入力された文字が整数以外の場合、エラーを出力したい

前提・実現したいこと

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件

コードのどこがおかしいのか、教えていただけませんか

条件分岐が間違っています。Number.isInteger(fizzNum) && Number.isInteger(bussNum)のときにErrorの表示を行っているのは、何を意味してのことでしょうか。

なお、ErrorはJavaScript標準で存在するオブジェクトです。別な変数の名前に使うことはおすすめできません。

投稿2020/05/16 09:30

maisumakun

総合スコア145183

Junkichi89

2020/05/16 09:36

ありがとうございます。その条件の時にならない時にエラーを出そうと思っていました。条件がおかしいですね。迅速な回答ありがとうございます。もう一度考え直してみます。

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

まず、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

snogot

総合スコア134

Junkichi89

2020/05/16 09:40

ありがとうございます。おっしゃる通りです。条件を考え直してみます。

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

まず、定数が少しおかしかったので修正しました。
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

Junkichi89

総合スコア8

ベストアンサー

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

yuuyu

総合スコア1135

Junkichi89

2020/05/16 12:59

ありがとうございます。詳細な解説、非常に参考になります。この内容も踏まえて、課題に取り組みます。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

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

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