1~fizz~buzz~fizzbuzz~100までの変数をブラウザ上に表示したいです

Question

前提・実現したいこと

初めてご利用させていただきます、
1fizzbuzzfizzbuzz100までの整数をブラウザ上に表示したいです

該当のソースコード

<script>
function box() {
  for (i = 1; i <= 100; i++)
    if (i % 15 === 0) {
      console.log("FizzBuzz")
    } else if (i % 3 === 0) {
      console.log("Fizz")
    } else if (i % 5 === 0) {
      console.log("Buzz");
    } else {
      console.log(i)
    }
}
box()
</script>

試したこと

document.writeを使いブラウザ上に表示しようとしました
先に指定した"fizzbuzz"しか表示されませんでした

<p></p>や<div2></div>を乱用したりしたのでがもう少し綺麗にブラウザ上に表記できないかと思い質問させていただきました

Comments

[退会済みユーザー]

試したコードが一切ないので、あなたの試した内容に対してアドバイスできません。
追記してください。

また、最終形のイメージがあるのであれば、ちゃんと伝えた方が良いです。

[退会済みユーザー]

一度スクリプト関係なしで、2～3行くらいでいいので`HTML`を使って見た目だけ書いてはいかがでしょう。
そうする事でスクリプトにする時どう書いたら良いのか分かるかと思います。

>　document.writeを使いブラウザ上に表示しようとしました
先に指定した"fizzbuzz"しか表示されませんでした

【document.write()】の話をされていますが、コードもありませんし、綺麗にとは言いますが綺麗の感性は主観的ですので、何をもって綺麗とするのか分かりません。
…ってか、【先に指定した"fizzbuzz"しか表示されませんでした】ってfizzbuzz解けてないような…。

とりあえず、その辺を整理して質問文を修正されてはいかがでしょう。

[takasima20]

たとえば、10x10のテーブルを「文字列」で作って span に innerHTML 設定する形はどうでしょうか。で、それをベースに手を加えていけば分かりやすいんじゃないかなあ。もちろん動的にテーブル作ってもいいんですが、それは今後の課題的な?

[tony999]

みなさまありがとうございます

言葉足らずな質問で大変申し訳ございませんでした

今後の教訓にさせていただきます

Answer 1

元ソースを生かして

<div id="hoge"></div>
<script>
function box() {
  const hoge=document.querySelector('#hoge');
  let txt;
  for (i = 1; i <= 100; i++){
    if (i % 15 === 0) {
      txt="FizzBuzz";
    } else if (i % 3 === 0) {
      txt="Fizz";
    } else if (i % 5 === 0) {
      txt="Buzz";
    } else {
      txt=i;
    }
    hoge.appendChild(Object.assign(document.createElement('div'),{textContent:txt}));
  }
}
box()
</script>

Comments

[tony999]

ご親切にありがとうございます。

無事解決できました。

Answer 2

<script> <div id="hoge"></div> <script> function box() { const hoge=document.querySelector('#hoge'); let txt; for (i = 1; i <= 100; i++){ if (i % 15 === 0) { txt="FizzBuzz"; } else if (i % 3 === 0) { txt="Fizz"; } else if (i % 5 === 0) { txt="Buzz"; } else { txt=i; } hoge.appendChild(Object.assign(document.createElement('div'),{textContent:txt})); } } box() </script>

Comments

[退会済みユーザー]

せっかく解決策を書いて頂いたのでマークダウン使いましょ。もったいないです。

[Zuishin]

いや、そもそもこれ他の人の回答にあるコードですよね？

[退会済みユーザー]

元は他人のコードでも自分の中に落とし込む中で書いたのなら良いんじゃないですかね。
ただ、貰ったコードなら尚更綺麗に扱ってほしいかなと思った次第です。
以上です。

[Zuishin]

単に「解決した方法」って書いてある欄にコピペしただけだと思いますよ。

[退会済みユーザー]

まあ、やめときましょ。なんか不毛な気がするので。

[Zuishin]

なぜ喧嘩腰？
次のあなたの返信は不毛な気がするので無用です。

確認したところ、「解決した方法」ではなく「解決方法（自己解決の場合のみ記入してください）」と書いてありました。
「自己解決の場合のみ」と注意書きがあるのを読んでいなかったか意味がわからなかったんでしょうね。

[Zuishin]

質問をしたことがない回答者は、一度質問をしてみることをお勧めします。質問者がどのように質問をしているかを知るのも回答に必要なこともあるでしょう。

Answer 3

コードゴルフ探したら、ほぼそのまま使えたので紹介しときます。

for(i=0;++i<101;document.write(i%5?x||i:x+'Buzz'))x=i%3?'':'Fizz'

Comments

[tony999]

言葉足らずな質問で申し訳ありませんでした。
ありがとうございます。

以後気をつけてご質問させていただきます。