特定の条件下で値を作成し出力する方法について

前提・実現したいこと

FizzBuzz問題に取り組んでいるのですが、値を出力する部分で少々つまずいてしまいました。
具体的な要件につきましては、以下を満たす形で実装したいと考えています。

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

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

途中まで実装してみたのですが、混乱してしまい、現状どうすれば良いか分からない状況です。

該当のソースコード

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>【出力】</p>
20</body>
21<script type="text/javascript" src="kadai-2.js"></script>
22</html>

javascript
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    let tag_p = document.createElement("p");
45    let current_fizz_value = document.createTextNode(fizz_num);
46    let current_buzz_value = document.createTextNode(buzz_num);
47    tag_p.appendChild(current_fizz_value);
48    
49    let max_value = 0;
50    while(max_value < 100){
51      if(fizz_num){
52
53      } 
54    }
55  }
56
57}

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

今回、仮に、FizzNumに「6」BuzzNumに「4」が入力された場合、以下の形でhtmlコードの【出力】文字の下に一覧で表示させる形にしたいです。

FizzNum: 6
BuzzNum: 4
FizzBuzz:12
BuzzNum:8

どなたか、ご助言頂けましたら幸いです。

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

回答1件

ベストアンサー

p要素に文字列を入れる方法の一例

HTML
1<p id="tag_p">【出力】</p>

JavaScript
1let tag_p = document.getElementById("tag_p");
2let current_fizz_value = document.createTextNode(`FizzNum: ${fizz_num}`);
3let current_buzz_value = document.createTextNode(`BuzzNum: ${buzz_num}`);
4tag_p.appendChild(document.createElement("BR"));
5tag_p.appendChild(current_fizz_value);
6tag_p.appendChild(document.createElement("BR"));
7tag_p.appendChild(current_buzz_value);

なぜBuzzNum:8より先にFizzBuzz:12を出力するのかわかりませんが、最小公倍数を求めたいのであれば、方法は検索すれば出てきます。
ただし、通常のFizzBuzzなら最小公倍数を求める必要はなくて、FizzかつBuzzの場合にFizzBuzzと表示すれば良いだけです。
Fizzかどうか、Buzzかどうかの判定がFizzBuzz問題の中心だと思うので、そこはご自身で考えないと意味がありません。

投稿2020/12/05 15:19