値の算出方法について

前提・実現したいこと

JavaScriptにて、FizzBuzz問題の課題を行なっているのですが、うまく行かない部分があり質問させて貰いました。
実装に必要な要件は以下4点になります。

fizzNumに入力された値の倍数とbuzzNumに入力された値の倍数を小さい順に表示する
各々倍数と一緒にfizz、buzzと表示させる
両方の倍数である時にはfizzBuzzと表示させる
表示させるのは二桁の値まで

発生している問題・エラーメッセージ

現状ですと、100を超えているにも関わらず値が出力されてしまっており、「FizzBuzz」と表示されるべき部分が「Fizz」や「Buzz」の値として表示されてしまっています。

該当のソースコード

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>FizzBuzz</title>
7</head>
8<body>
9  <h1>FizzBuzz問題</h1>
10  <p>
11    FizzNum:
12    <input type="text" id="fizz_num">
13  </p>
14  <p>
15    BuzzNum:
16    <input type="text" id="buzz_num">
17  </p>
18  <input type="button" id="button" value="実行">
19  <p id="tag_p">【出力】</p>
20</body>
21<script type="text/javascript" src="kadai-2.js"></script>
22</html>

js
1'use strict';
2document.getElementById("button").onclick = function(){
3  let fizz_num = document.getElementById("fizz_num").value;
4  
5  let buzz_num = document.getElementById("buzz_num").value;
6  let fizz_num_err_msg = '';
7  let buzz_num_err_msg = '';
8  let empty_err = false;
9  if(fizz_num === ''){
10    fizz_num_err_msg = 'fizz_numの値を入力して下さい';
11    empty_err = true;
12  }
13  if(buzz_num === ''){
14    buzz_num_err_msg = 'buzz_numの値を入力して下さい';
15    empty_err = true;
16  }
17  if(empty_err === false){
18    fizz_num = Number(fizz_num);
19    buzz_num = Number(buzz_num);
20    // console.log(buzz_num)
21    // console.log('ok')
22    if(fizz_num){
23      if(!Number.isInteger(fizz_num)){
24        fizz_num_err_msg = 'FizzNumに整数を入力して下さい';
25      }
26    }else{
27      fizz_num_err_msg = 'FizzNumに整数を入力して下さい';
28    }
29    if(buzz_num){
30      console.log(buzz_num);
31      if(!Number.isInteger(buzz_num)){
32        buzz_num_err_msg = 'BuzzNumに整数を入力して下さい';
33        // console.log(buzz_num_err_msg);
34      }
35    }else{
36      buzz_num_err_msg = 'BuzzNumに整数を入力して下さい';
37      // console.log(buzz_num_err_msg);
38    }
39    // console.log(buzz_num_err_msg);
40  }
41  console.log(buzz_num_err_msg);
42  console.log(fizz_num_err_msg);
43  if(!buzz_num_err_msg && !fizz_num_err_msg){
44    // console.log('ok')
45    let tag_p = document.getElementById("tag_p");
46    let current_fizz_value = document.createTextNode(`Fizz: ${fizz_num}`);
47    let current_buzz_value = document.createTextNode(`Buzz: ${buzz_num}`);
48    tag_p.appendChild(document.createElement("BR"));
49    tag_p.appendChild(current_fizz_value);
50    tag_p.appendChild(document.createElement("BR"));
51    tag_p.appendChild(current_buzz_value);
52
53    var max_value = 0;
54    var first_num = 0;
55    var secound_num = 0;
56    var fizz_buzz = 0
57    const base_fizz_num = fizz_num;
58    const base_buzz_num = buzz_num;
59    let display_fizz_value = '';
60    let display_buzz_value = '';
61    let display_fizz_buzz_value = '';
62    for(var i = 2; max_value < 100; i++){
63      fizz_num = fizz_num * i;
64      buzz_num = buzz_num * i;
65      // console.log(fizz_num)
66      if(buzz_num > fizz_num){
67        // console.log('buzz_num > fizz_num')
68        first_num = fizz_num;
69        secound_num = buzz_num;
70        if(secound_num % base_fizz_num == 0){
71          display_fizz_value = document.createTextNode(`Fizz: ${first_num}`);
72          display_fizz_buzz_value = document.createTextNode(`FizzBuzz: ${secound_num}`);
73          tag_p.appendChild(document.createElement("BR"));
74          tag_p.appendChild(display_fizz_value);
75          tag_p.appendChild(document.createElement("BR"));
76          tag_p.appendChild(display_fizz_buzz_value);
77        }else{
78          display_buzz_value = document.createTextNode(`Buzz: ${first_num}`);
79          display_fizz_value = document.createTextNode(`Fizz: ${secound_num}`);
80          tag_p.appendChild(document.createElement("BR"));
81          tag_p.appendChild(display_buzz_value);
82          tag_p.appendChild(document.createElement("BR"));
83          tag_p.appendChild(display_fizz_value);
84        }
85      }else{
86        // console.log('buzz_num <= fizz_num')
87        first_num = buzz_num;
88        secound_num = fizz_num;
89        if(secound_num % base_buz_num == 0){
90          display_buzz_value = document.createTextNode(`Buzz: ${first_num}`);
91          display_fizz_buzz_value =document.createTextNode(`FizzBuzz: ${secound_num}`)
92          tag_p.appendChild(document.createElement("BR"));
93          tag_p.appendChild(display_buzz_value);
94          tag_p.appendChild(document.createElement("BR"));
95          tag_p.appendChild(display_fizz_buzz_value);
96        }else{
97          display_fizz_value = document.createTextNode(`Fizz: ${first_num}`);
98          display_buzz_value = document.createTextNode(`Buzz: ${secound_num}`);
99          tag_p.appendChild(document.createElement("BR"));
100          tag_p.appendChild(display_fizz_value);
101          tag_p.appendChild(document.createElement("BR"));
102          tag_p.appendChild(display_buzz_value);
103        }
104      }
105      max_value = Math.max(first_num,secound_num);
106      // console.log('max_value',max_value);
107    }
108  }
109
110}

補足情報（FW/ツールのバージョンなど）

コードの方は、動作確認可能な形としてjsfiddleにアップロードしてある状況です
どなたか、ご助言の程頂けましたら幸いです。

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

回答1件

とりあえず例外処理系の部分はあとから追加してください
コアな部分から始めた方がいいでしょう
first_numやmax_numの使い方もおかしくないですか？

一例

javascript
1'use strict';
2window.addEventListener('DOMContentLoaded', function(e){
3  document.querySelector("#button").addEventListener('click',function(){
4    const first_num = 1;
5    const max_value = 100;
6    let fizz_num = parseInt(document.querySelector("#fizz_num").value);
7    let buzz_num = parseInt(document.querySelector("#buzz_num").value);
8    let display_value="";
9    let key="";
10    for(var i = first_num; i <= max_value; i++){
11      key="";
12      if(i%fizz_num==0) key+="Fizz";
13      if(i%buzz_num==0) key+="Buzz";
14      if(key!==""){
15        display_value = document.createTextNode(`${key}: ${i}`);
16        tag_p.appendChild(document.createElement("BR"));
17        tag_p.appendChild(display_value);
18      }
19    }
20  });
21});

投稿2020/12/06 11:55

yambejp

総合スコア114777

ruuuu

2020/12/06 12:13

ご回答ありがとうございます。実の所、コードを書いていて少々複雑になってしまい、混乱してしまっていました... ご回答いただいたコードで、お聞きしたい点があるのですが、変数「 key 」は何を示しておりますでしょうか...?

ruuuu

2020/12/06 12:17

また、以下の部分では何を行なっているのかが、分からない状況です... if(i%fizz_num==0) key+="Fizz"; if(i%buzz_num==0) key+="Buzz";

yambejp

2020/12/07 00:33

今回のkeyは「Fizz:」「Buzz:」「FizzBuzz:」の部分です

ruuuu

2020/12/07 11:52 編集

ご返信ありがとうございます！後、少々気になったのですが、今回ですと、自分はボタンが押された際の処理として、「document.getElementById("button").onclick = function(){」を使用していますが、ご回答のコードでは「 document.querySelector("#button").addEventListener('click',function(){」こちらを使用されています。こちらを採用された理由などはありますでしょうか？

yambejp

2020/12/07 11:59

getElementByIdメソッドはidでしかHTML要素を特定できませんが querySelectorは汎用的にセレクタを利用してHTML要素を特定できるため使い勝手いいです最近のブラウザはどうかちょっとわからないですが onイベントの書き換えはメモリリークの問題で使用が敬遠されていましたまた上記同様addEventListenerの汎用性が高いのもあります。

ruuuu

2020/12/07 12:16

ありがとうございます。やはりイベントハンドラよりもイベントリスナーの方が、汎用性は高いですよね。

ruuuu

2020/12/07 12:20

実は、コードの方を少々改善してみたのですが、改善出来ない点が未だ2点程ある状況です。新しく質問を立てるにしても、あまり質問内容が変わらないため、本質問のコードを変更しようと考えているのですが、お手数ですが、チェック頂くこと可能でしょうか...?

yambejp

2020/12/07 12:23

時間があれば確認します。

ruuuu

2020/12/10 06:10

少々、自分で試行錯誤していたのですが、なんとか自己解決することが出来ました。