フォームに整数値以外が入力された場合、計算されない仕様に変更したい

フォーム内の一方または両方に整数値以外が入力された場合に、以下の写真のように計算が起動しない仕様に変更したいです。

調べたのですが、どう修正しても、整数値であっても整数値を入れた場合も計算が起動してしまい、悩んでおります。

index.html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>FizzBuzz問題</title>
6</head>
7<body>
8    <p>
9      FizzNum: <input type="text" id="fizzInput" value=""  placeholder ="整数値を入力してください">
10    </p>  
11    <p>
12      BuzzNum:<input type="text" id="buzzInput"  value="" placeholder ="整数値を入力してください">
13    </p>
14    <button id="btn">実行</button>
15  <p>【出力】</p>
16  <p id="p">整数値を入力してください</p> 
17  <div id=result></div>
18
19  
20  
21  <script>
22  'use strict';
23  {
24
25  const fizzForm = document.getElementById ('fizzInput');
26  const buzzForm = document.getElementById ('buzzInput');
27  const p = document.getElementById('p');
28
29  const btn = document.getElementById('btn');
30    btn.addEventListener('click', function() {
31
32      
33      document.body.removeChild(p);
34      const fizzNum = parseFloat(fizzForm.value);
35      const buzzNum = parseFloat(buzzForm.value); 
36
37      if (Number.isInteger(fizzNum) && Number.isInteger(buzzNum))
38      {
39        
40        } else {
41          console.log(alert('エラーメッセージ「整数値 を入力してください」'));
42        }
43
44    const result = document.getElementById('result');
45    result.innerHTML = "";    
46    for (let number = 1; number <= 100; number++) {
47
48      console.log(Number.isInteger(fizzNum));
49      console.log(Number.isInteger(buzzNum));
50
51      if(number % fizzNum === 0 && number % buzzNum   ===   0 ) 
52      {
53        const p = document.createElement('p');
54        p.textContent = ("FizzBuzz" + " "+ number);
55        result.appendChild(p);
56
57      } else if (number % fizzNum === 0) {
58        const p = document.createElement('p');
59        p.textContent = ("Fizz" + " " + number);
60        result.appendChild(p);
61
62      } else if (number % buzzNum  ===  0) {
63        const p = document.createElement('p');
64        p.textContent = ("Buzz" + " " + number);
65        result.appendChild(p);
66      }
67  }
68  });
69}
70  </script>
71</body>
72</html>
73コード

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

回答2件

どう修正しても、整数値であっても整数値を入れた場合も計算が起動してしまい、悩んでおります。

価の状態を確認してメッセージは出していますが、処理を打ち切っていないのでそのまま進んでしまいます。

投稿2019/11/24 13:37

maisumakun

総合スコア145183

asako1010

2019/11/25 00:28

ありがとうございます。

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

ベストアンサー

js
1
2    const result = document.getElementById('result');
3    result.innerHTML = "";    
4    for (let number = 1; number <= 100; number++) {
5
6      console.log(Number.isInteger(fizzNum));
7      console.log(Number.isInteger(buzzNum));
8
9      if(number % fizzNum === 0 && number % buzzNum   ===   0 ) 
10      {
11        const p = document.createElement('p');
12        p.textContent = ("FizzBuzz" + " "+ number);
13        result.appendChild(p);
14
15      } else if (number % fizzNum === 0) {
16        const p = document.createElement('p');
17        p.textContent = ("Fizz" + " " + number);
18        result.appendChild(p);
19
20      } else if (number % buzzNum  ===  0) {
21        const p = document.createElement('p');
22        p.textContent = ("Buzz" + " " + number);
23        result.appendChild(p);
24      }
25  }
26