FizzBuzzの応用問題が上手く表示することができません。

前提・実現したいこと

FizzBuzzの応用したプログラムを作成しております。

以下のことを表示されるようにプログラムを組みたいのですが上手くいきません。
FuzzNumとBizzNumに数字を入力し、実行ボタンを押すことで
1.fizzNumに入力された値の倍数とbuzzNumに入力された値の倍数を小さい順に表示する
2.各々倍数と一緒にfizz、buzzと表示させる
3.両方の倍数である時にはfizzBuzzと表示させる

画像のように実行したいのですが上手くできません。
正しく表示するためにはどう修正したらいいでしょうか?

該当のソースコード

<body>
    <h1>FizzBuzz問題</h1>
    <p>FuzzNum</p>
    <input id="num1" type="text">
    <p>BizzNum</p>
    <input id="num2" type="text">
    <button>実行</button>
    <p>【出力】</p>
    <ul id="unserlist">
    </ul>
    <script>
　　　　document.querySelector("button").addEventListener('click',() => {
        const ul = document.getElementById("unserlist");
        const text1 = document.getElementById("num1").value;
        const text2 = document.getElementById("num2").value;

        for(let i = 1; i <= 100; i++) {
            const li = document.createElement("li")
            if(text1*i <100) {
                li.textContent = (`Fuzz${text1*i}`)
                ul.appendChild(li)
            }else if(text2*i <100){
                li.textContent = (`Bizz${text2*i}`)
                ul.appendChild(li)
            }else if(((text1*i===text2*i) || (text1*text2*i) <100)){
                li.textContent = (`FuzzBizz${text1*text2*i}`)
                ul.appendChild(li)
            }
        }
　　</script>
</body>

発生している問題

最初のFuzzNumを表示してところでプログラムが終了してします。
前提・実現したいことにのせた画像のように表示するのはどうしたらいいでしょうか?

hentaiman

2020/10/12 18:53

console.logで値の確認してみてはどうですか？

m.ts10806

2020/10/12 20:31

通常のFizzbuzzの数字いれたらちゃんと通るのでしょうか

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

回答3件

ベストアンサー

forループで i を加算していってますので、

もし i がtext1の倍数かつtext2の倍数なら、FizzBuzz${i} と出力
それ以外でもし i がtext1の倍数なら、Fizz${i} と出力
それ以外でもし i がtext2の倍数なら、Buzz${i} と出力

というようなロジックにすればいいでしょう。

倍数かどうかのチェックは剰余演算子(%)で余りを求めてそれが0なら倍数と判断できます。

投稿2020/10/13 00:47

hatena19

総合スコア34075

kota_12134

2020/10/17 21:13

ご回答ありがとうございました。ご回答していただいたとおりに、余剰演算子で余りを求めるやりかたで思いどおりの表示ができるようになりました。 if(regex.test(text1)&&regex.test(text2)){ for(let i = 1; i <100; i++){ const li = document.createElement("li"); if(i % text1 === 0 && i % text2 === 0){ li.textContent = (`FizzBuzz${i}`); ul.appendChild(li) }else if(i % text1 === 0){ li.textContent = (`Fizz${i}`); ul.appendChild(li) }else if(i % text2 === 0){ li.textContent = (`Buzz${i}`); ul.appendChild(li) } }

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

if(regex.test(text1)&&regex.test(text2)){
for(let i = 1; i <100; i++){
const li = document.createElement("li");
if(i % text1 === 0 && i % text2 === 0){
li.textContent = (FizzBuzz${i});
ul.appendChild(li)
}else if(i % text1 === 0){
li.textContent = (Fizz${i});
ul.appendChild(li)
}else if(i % text2 === 0){
li.textContent = (Buzz${i});
ul.appendChild(li)
}
}

投稿2020/10/17 21:14

kota_12134

総合スコア1

該当のソースコードの挙動は理解していますか？
ざっと見た感じ、FizzNum と BuzzNum の倍数を「作り出そう」としているのですが、要件として

1.FizzNumに入力された値の倍数とBuzzNumに入力された値の倍数を小さい順に表示する

があるので、この方向性で実現するのであれば、作った数字をすべて配列にでもまとめた後に、ソートしてやる必要があります。(ほかにも双方の倍数を抽出するとかも必要)
また分岐条件がズレたことをやっているので、フローを見直してください。

手っ取り早いのは、順次インクリメントした数字が、FizzNum と BuzzNum の倍数かどうかを確認することですが、私は今の方向性の方が好きなので、頑張ってください。

#追記
自己回答として倍数かどうかを検証する方向に変えたコードに落ち着いてしまったようなので、「倍数を作る方向性のコード」を追記しておきます。
ソートしなくてよいようにインデックスを使用しました。
普段 JavaScript を使用しないので、ちょっと自信ないですが。。。

JavaScript
1const num1 = {'str':'Fizz', 'num':5};
2const num2 = {'str':'Buzz', 'num':2};
3
4const a = num1.num < num2.num ? num1 : num2 ;
5const b = num1.num < num2.num ? num2 : num1 ;
6
7let i = 0;
8let result = [];
9
10while (a.num * ++i <= 100) {
11    result[a.num * i] = result[a.num * i] ? 'FizzBuzz' : a.str;
12    if (b.num * i <= 100) result[b.num * i] = b.str;
13}
14
15console.table(result);

┌─────────┬────────────┐
│ (index) │   Values   │
├─────────┼────────────┤
│    2    │   'Buzz'   │
│    4    │   'Buzz'   │
│    5    │   'Fizz'   │
│    6    │   'Buzz'   │
│    8    │   'Buzz'   │
│   10    │ 'FizzBuzz' │
│   12    │   'Buzz'   │
│   14    │   'Buzz'   │
│   15    │   'Fizz'   │
│   16    │   'Buzz'   │
│   18    │   'Buzz'   │
│   20    │ 'FizzBuzz' │
│   22    │   'Buzz'   │
│   24    │   'Buzz'   │
│   25    │   'Fizz'   │
│   26    │   'Buzz'   │
│   28    │   'Buzz'   │
│   30    │ 'FizzBuzz' │
│   32    │   'Buzz'   │
│   34    │   'Buzz'   │
│   35    │   'Fizz'   │
│   36    │   'Buzz'   │
│   38    │   'Buzz'   │
│   40    │ 'FizzBuzz' │
│   42    │   'Buzz'   │
│   44    │   'Buzz'   │
│   45    │   'Fizz'   │
│   46    │   'Buzz'   │
│   48    │   'Buzz'   │
│   50    │ 'FizzBuzz' │
│   52    │   'Buzz'   │
│   54    │   'Buzz'   │
│   55    │   'Fizz'   │
│   56    │   'Buzz'   │
│   58    │   'Buzz'   │
│   60    │ 'FizzBuzz' │
│   62    │   'Buzz'   │
│   64    │   'Buzz'   │
│   65    │   'Fizz'   │
│   66    │   'Buzz'   │
│   68    │   'Buzz'   │
│   70    │ 'FizzBuzz' │
│   72    │   'Buzz'   │
│   74    │   'Buzz'   │
│   75    │   'Fizz'   │
│   76    │   'Buzz'   │
│   78    │   'Buzz'   │
│   80    │ 'FizzBuzz' │
│   82    │   'Buzz'   │
│   84    │   'Buzz'   │
│   85    │   'Fizz'   │
│   86    │   'Buzz'   │
│   88    │   'Buzz'   │
│   90    │ 'FizzBuzz' │
│   92    │   'Buzz'   │
│   94    │   'Buzz'   │
│   95    │   'Fizz'   │
│   96    │   'Buzz'   │
│   98    │   'Buzz'   │
│   100   │ 'FizzBuzz' │
└─────────┴────────────┘

投稿2020/10/12 20:58

編集2020/10/17 22:20