【JavaScript】FizzBuzzメソッドがうまく表示されない。

JavaScriptでFizzBuzzメソッドを作成しているのですが、うまくいきません。
仕様としては
①FizzNumとBuzzNumのinputに自由に数値を入力
②「実行」ボタンを押す
③その数値でのFizzBuzz結果を【出力】以下に表示
というものです。

ソースコードは以下の通りです。
なぜかinput内に入力した数値がうまく取得できていません。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Document</title>
7</head>
8<body>
9  <h1>FizzBuzz問題</h1>
10  <p>FizzNum:&nbsp;<input type="text" id="fizz-num" placeholder="整数値を入力してください。"></p>
11  <p>BuzzNum:&nbsp;<input type="text" id="buzz-num" placeholder="整数値を入力してください。"></p>
12  <button id="button">実行</button>
13  <p>【出力】</p>
14  <script src="js/main.js"></script>
15</body>
16</html>

JavaScript
1'use-strict';
2
3const button = document.getElementById('button');
4const numList = document.createElement('ul');
5const fizzNum = Number(document.getElementById('fizz-num').value);
6const buzzNum = Number(document.getElementById('buzz-num').value);
7
8button.addEventListener('click', () => {
9  if(Number.isInteger(fizzNum) && Number.isInteger(buzzNum)) {
10    Cal(fizzNum, buzzNum);
11    document.querySelector('body').appendChild(numList);
12  } else {
13    numList.innerHTML = '<li>整数ではありません。</li>';
14    document.querySelector('body').appendChild(numList);
15  }
16})
17
18//計算
19function Cal(fizz, buzz) {
20  for (let i = 0; i < 100; i++) {
21    if(i % fizz == 0 && i % buzz == 0) {
22      numList.innerHTML += `<li>FizzBuzz ${i}</li>`;
23    } else if(i % fizz == 0) {
24      numList.innerHTML += `<li>Fizz ${i}</li>`;
25    } else if(i % buzz == 0) {
26      numList.innerHTML += `<li>Buzz ${i}</li>`;
27    } else {
28
29    }
30  }
31}

初心者のレベルの低い質問で申し訳ありませんが、ぜひ博識の方の知識をお貸しください。
よろしくお願いいたします。

kei344

2020/09/23 19:00

「うまくできない」とは「何をしたときに」「どうなると思って」「どうなったのか」を、出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。

退会済みユーザー

2020/09/23 19:16

承知いたしました。アドバイス誠にありがとうございます。

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

回答1件

ベストアンサー

JavaScriptでのコードで

const fizzNum = Number(document.getElementById('fizz-num').value)
const buzzNum = Number(document.getElementById('buzz-num').value)

と一気に変換するのではなく、いったん

const fizzNum = document.getElementById('fizz-num');
const buzzNum = document.getElementById('buzz-num');

と定義し、使うときに

Number(fizzNum.value)
Number(buzzNum.value)

と分割するとうまくいきました。

●全コード

JavaScript
1'use-strict';
2
3const button = document.getElementById('button');
4const numList = document.createElement('ul');
5const fizzNum = document.getElementById('fizz-num');
6const buzzNum = document.getElementById('buzz-num');
7
8button.addEventListener('click', () => {
9  if(Number.isInteger(Number(fizzNum.value)) && Number.isInteger(Number(buzzNum.value))) {
10    Cal(Number(fizzNum.value), Number(buzzNum.value));
11    document.querySelector('body').appendChild(numList);
12  } else {
13    numList.innerHTML = '<li>整数値を入力してください。</li>';
14    document.querySelector('body').appendChild(numList);
15  }
16})
17
18//計算
19function Cal(fizz, buzz) {
20  for (let i = 1; i < 100; i++) {
21    if(i % fizz == 0 && i % buzz == 0) {
22      numList.innerHTML += `<li>FizzBuzz ${i}</li>`;
23    } else if(i % fizz == 0) {
24      numList.innerHTML += `<li>Fizz ${i}</li>`;
25    } else if(i % buzz == 0) {
26      numList.innerHTML += `<li>Buzz ${i}</li>`;
27    } else {
28
29    }
30  }
31}
32