質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.80%

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

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 167

kota_12134

score 1

前提・実現したいこと

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を表示してところでプログラムが終了してします。
前提・実現したいことにのせた画像のように表示するのはどうしたらいいでしょうか?
イメージ説明

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • hentaiman

    2020/10/13 03:53

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

    キャンセル

  • m.ts10806

    2020/10/13 05:31

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

    キャンセル

回答 3

checkベストアンサー

+1

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/10/18 06: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)
    }
    }

    キャンセル

0

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

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

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

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

追記

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

const num1 = {'str':'Fizz', 'num':5};
const num2 = {'str':'Buzz', 'num':2};

const a = num1.num < num2.num ? num1 : num2 ;
const b = num1.num < num2.num ? num2 : num1 ;

let i = 0;
let result = [];

while (a.num * ++i <= 100) {
    result[a.num * i] = result[a.num * i] ? 'FizzBuzz' : a.str;
    if (b.num * i <= 100) result[b.num * i] = b.str;
}

console.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/18 06:14

    ご回答ありがとうございます。

    考えの参考にさせていただきたいと思います。

    キャンセル

0

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)
}
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.80%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る