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

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

新規登録して質問してみよう
ただいま回答率
85.35%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

1740閲覧

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

kota_12134

総合スコア1

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/10/12 18:50

前提・実現したいこと

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hentaiman

2020/10/12 18:53

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

2020/10/12 20:31

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

回答3

0

ベストアンサー

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

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

投稿2020/10/17 21:14

kota_12134

総合スコア1

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

該当のソースコードの挙動は理解していますか?
ざっと見た感じ、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
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kota_12134

2020/10/17 21:14

ご回答ありがとうございます。 考えの参考にさせていただきたいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問