if文を使い小数点が含まれている場合の条件分岐の処理を追加したい。

前提・実現したいこと

if文を使い、入力された値に小数点が含まれていた場合に「整数値を入力してください」のエラーメッセージが表示されるようにしたい。

該当のソースコード

※動作が上手くいかない箇所はJavaScriptファイルの最後のelse ifの部分です。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <link rel="stylesheet" href="style.css">
8    <title>FizzBuzz</title>
9</head>
10
11<body>
12    <h1>FizzBuzz問題</h1>
13    FizzNum：<input type="text" id="fizzNum" placeholder="整数値を入力してください" value="">
14    <br>
15    BuzzNum：<input type="text" id="buzzNum" placeholder="整数値を入力してください" value="">
16    <br>
17    <button type="button" id="output">実行</button>
18    <h3>【出力】</h3>
19
20    <ul id="fizzbuzzList"></ul>
21
22    <script src="main.js"></script>
23</body>
24
25</html>

JavaScript
1const button = document.getElementById("output");
2const fizzbuzzList = document.getElementById("fizzbuzzList");
3
4const listAdd = (a) => {
5  const li = document.createElement("li");
6  li.innerHTML = a;
7  fizzbuzzList.appendChild(li);
8};
9
10button.addEventListener("click", () => {
11  const fizzNum = document.getElementById("fizzNum").value;
12  const buzzNum = document.getElementById("buzzNum").value;
13
14  if (fizzNum > 0 && buzzNum > 0) {
15    for (i = 1; i < 100; i++) {
16      if (i % fizzNum === 0 && i % buzzNum === 0) {
17        listAdd("FizzBuzz" + i);
18      } else if (i % fizzNum === 0) {
19        listAdd("Fizz" + i);
20      } else if (i % buzzNum === 0) {
21        listAdd("Buzz" + i);
22      }
23    }
24  } else if (fizzNum == "" || buzzNum == "") {
25    listAdd("整数値を入力してください");
26  } else if (typeof fizzNum === "string" || typeof buzzNum === "string") {
27    listAdd("整数値を入力してください");
28  } else if (fizzNum < 0 || buzzNum < 0) {
29    listAdd("整数値を入力してください");
30  }
31});

試したこと

JavaScript
1else if (fizzNum < 0 || buzzNum < 0) {
2    listAdd("整数値を入力してください");
3  }

この部分を

JavaScript
1else if (indexOf.fizzNum(".") !== -1 || indexOf.buzzNum(".") !== -1) {
2    listAdd("整数値を入力してください");
3  }

JavaScript
1else if (fizzNum.includes(".") !== -1 || buzzNum.includes(".") !== -1) {
2    listAdd("整数値を入力してください");
3  }

こちらに変更して試してみたのですが上手く作動されず表示されませんでした。
お手上げ状態になってしまったのでご教授いただけると助かります。

###追記

回答いただいたものを参考に書き換えてみました。

JavaSceipt
1else if (Number.isInteger(fizzNum) == false || Number.isInteger(buzzNum) == false) {
2listAdd("整数値を入力してください");
3}

このようにしてみましたが何も表示されませんでした。

cerfweb

2020/11/26 11:35

<input type="text" ... の代わりに <input type="number" step="1'" ... とするのはなしですか。

takasima20

2020/11/26 11:37

isInteger() は?

F_Yohei

2020/11/26 13:15

回答いただきありがとうございます???? else if (Number.isInteger(fizzNum) == false || Number.isInteger(buzzNum) == false) { listAdd("整数値を入力してください"); } このように修正してみたのですが何も表示されませんでした。書き方が間違っているのでしょうか？

takasima20

2020/11/26 14:47

最初の if に入ってんじゃないスかね? エラーチェックするならその前にやらないと

F_Yohei

2020/11/27 01:37

ご返信いただきありがとうございます。試しに最後のelse ifの処理をif文で単体で実行してみたところエラーも出ずに動きました。ただ、他のところで問題が発生しました。他の方が回答してくださったもので何とか解決することができました???? お時間とっていただきありがとうございました(^^)

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

回答1件

ベストアンサー

ifの位置もそうですがinput要素から得た数はそのままだと文字列なのでNumber()等で数値化しないとNumber.isInteger()で期待した値が取れませんよ。

JavaScript
1button.addEventListener("click", () => {
2  const fizzNum = Number(document.getElementById("fizzNum").value);
3  const buzzNum = Number(document.getElementById("buzzNum").value);
4
5  if (Number.isInteger(fizzNum) && Number.isInteger(buzzNum) && fizzNum > 0 && buzzNum > 0) {
6    for (i = 1; i < 100; i++) {
7      if (i % fizzNum === 0 && i % buzzNum === 0) {
8        listAdd("FizzBuzz" + i);
9      } else if (i % fizzNum === 0) {
10        listAdd("Fizz" + i);
11      } else if (i % buzzNum === 0) {
12        listAdd("Buzz" + i);
13      }
14    }
15  } else {
16    listAdd("整数値を入力してください");
17  }
18});

inputのバリデーション機能使うならこう

HTML
1    <h1>FizzBuzz問題</h1>
2    FizzNum：<input type="number" min="1" step="1" required id="fizzNum" placeholder="整数値を入力してください" value="">
3    <br>
4    BuzzNum：<input type="number" min="1" step="1" required id="buzzNum" placeholder="整数値を入力してください" value="">
5    <br>
6    <button type="button" id="output">実行</button>
7    <h3>【出力】</h3>
8
9    <ul id="fizzbuzzList"></ul>

JavaScript
1button.addEventListener("click", () => {
2  const fizz = document.getElementById("fizzNum");
3  const buzz = document.getElementById("buzzNum");
4
5  if (fizz.matches(':valid') && buzz.matches(':valid')) {
6    const fizzNum = Number(fizz.value);
7    const buzzNum = Number(buzz.value);
8    for (i = 1; i < 100; i++) {
9      if (i % fizzNum === 0 && i % buzzNum === 0) {
10        listAdd("FizzBuzz" + i);
11      } else if (i % fizzNum === 0) {
12        listAdd("Fizz" + i);
13      } else if (i % buzzNum === 0) {
14        listAdd("Buzz" + i);
15      }
16    }
17  } else {
18    listAdd("整数値を入力してください");
19  }
20});

こちらだと特典として:valid,:invalid疑似クラスを使ったスタイル付けがききます。

CSS
1input:invalid {
2  background-color: #ffdddd;
3}
4input:valid {
5  background-color: #ddffdd;
6}

投稿2020/11/26 17:48

shinji709

総合スコア805

F_Yohei

2020/11/27 01:42

回答いただきありがとうございます???? なるほど。 inputに入力された値は数字が入力されてもstring型として判定される為、Number()で数値化してからNumber.isInteger()を使わないと数字を入力してもtrueが返ってこないということですね???? inputのバリデーション機能のことまで教えていただきありがとうございます????‍♂️ コードもかなりシンプルにすることができたので本当に助かりました。

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