【JavaScript】FizzBuzz問題をHTMLで作成する方法について

画面内で入力した数値を最大値として
3で割り切れるとき「Fizz」、5で割り切れるとき「Buzz」、両方で割る切れるとき「FizzBuzz」と表示させるプログラムをHTML+JavaScriptで作成しています。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>FizzBuzz問題</title>
6</head>
7<body>
8    <h1>FizzBuzz問題</h1>
9
10    <div class="d1">
11        <p class="p1">最大値を入力して下さい。</p>
12        <input type="number" value="" id="text">
13    </div>
14
15    <p><input type="button" value="実行" onClick="fizzbuzz()"></p>
16    <div id="results"></div>
17
18    <script>
19        function fizzbuzz() {
20            const fbArray = [];
21            const fbText = [];
22            const count =parseInt(document.getElementById('text').value);
23            const results = document.getElementById('results');
24
25            for (let i = 1; i <= count; i++) {
26                if (i % 3 == 0 && i % 5 == 0) {
27                    fbArray.push('fizzBuzz');
28
29                } else if (i % 3 == 0) {
30                    fbArray.push('fizz');
31
32                } else if (i % 5 == buzz) {
33                    fbArray.push('buzz');
34
35                } else {
36                    fbArray.push(i);
37                }
38            }
39            
40            for (const v of fbArray){
41                fbText.push(`<p>${v}</p>`);
42            }
43
44            const fbHtml = fbText.join('');
45
46            results.innerHTML = fbHtml;
47        }
48    </script>
49
50</body>
51</html>

参考にしたサイトは以下です。
https://qiita.com/jack1-2-3/items/5e7c6afede31cf26a14b

ボタンは反応しているようですが、表示がされないので

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

回答1件

ベストアンサー

Chromeでデベロッパーツール開いてコンソールを確認すると

Uncaught ReferenceError: buzz is not defined

というエラーログが出力されす。

実際ソース見ると、

} else if (i % 5 == buzz) {

とありますがこれは、

} else if (i % 5 == 0) {

の誤りでしょう。

投稿2020/12/08 05:38

draq

総合スコア2573

west_side_park

2020/12/08 07:17 編集

ご回答ありがとうございます！全然気づきませんでした。JSだけでfizzbuzz問題を解いたいたときはコンソールで出力できていたので、書き換えているうちに間違えていたようです。現在デベロッパーツールのエラーは消えましたが、まだ表示がされていません。 draq様の環境では表示されましたでしょうか？ (デベロッパーツールを使う発想がなかったので、こちらも気づかせていただいて感謝です。) スクリプト式の最後、results.innerHTML = fbHtml;の辺りがうまくいっていないのか、そもそも入力した数値が受け取れておらずfor文が回せていないのか、お気付きでしたらご教授お願い致します。