Javascriptでのfor文で、初期化が上手くいきません！

###前提・実現したいこと
for文を使って, 「ポケットの中にはビスケットが1つ」という文章を、
ボタンを押したら「ポケットの中にはビスケットが1つ」という文が一気に100個に増えるようにしたいのですが、↓の画像の通り、「ポケットの中にはビスケットが1つ」という文章が重複してしまいます。この重複を直すにはどこを変えたらいいのでしょうか？
よろしくお願いします。

イメージ説明

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

エラーメッセージ

###該当のソースコード

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>練習問題9(2)</title>
    <script src="9(2).js"></script>
  </head>

  <body>
    <h1>「ふしぎなポケット」</h1>
    <p><input type="button" value="ポケット" onclick="knock();"></p>
    <ul id="biscuit">
      <li>ポケットの中にはビスケットが1つ</li>
    </ul>
  </body>

</html>

function
1
2    var x = document.getElementById('biscuit').innerHTML;
3    for (var b = 1; b <= 100; b = b + 1) {
4
5    x = x + '<li>ポケットを叩くとビスケットが'+ b +'つ</li>';
6   document.getElementById('biscuit').innerHTML = x;
7
8}
9
10}
11

最初の画面(ボタンを押す前)にすでに、「ポケットの中にはビスケットが1つ」という文は表示されており、ボタンを押すと、新しく、「ポケットの中にはビスケットが1つ」という文章に始まり、100まで表示されます。

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

回答2件

勉強目的ならば、innerHTML でも insertAdjacentHTML() でもなく、createTextNode() + appendChild をお勧めします。
DOMノード単位で考えられるようになると、出来る事が格段に増えます。

Re: miramikan さん

投稿2017/06/14 12:21

think49

総合スコア18164

miramikan

2017/06/14 12:45 編集

そうなのですね！これは授業で用意された問題なのですが、もっと積極的に教えてくださったことも含めて学んでいきたいです。丁寧にリンクまで貼り付けていただいて、アドバイスして頂いてありがとうございますm(__)m 頑張ります！

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

ベストアンサー

もともとあるHTMLに1が用意されているので、追加していくのは2からではないですか？

JavaScript
1for (var b = 2; b <= 100; b = b + 1) {

なお、毎回innerHTMLで丸ごと書き換えるのはお勧めできません。

投稿2017/06/14 12:13

x_x

総合スコア13749

miramikan

2017/06/14 12:42

ありがとうございます！無事解決しました！アドバイスありがとうございます。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

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

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

Javascriptでのfor文で、初期化が上手くいきません！

関連した質問