javascript - クリックすると、同じ行に画像が複製されます

Question

クリックで画像の行を作成しようとしていますが、ページの下部にある div タグの後に表示されています。

     flowers = 1;

     function makeFlower() {

        if (flowers < 10 ){document.body.innerHTML +="<img src='flower.jpg'>";
        flowers ++;
            }
}


<p> Make a happy garden by clicking the flower many times! </p>
    <p><img src="flower.jpg"
            onClick="makeFlower()">
            </p>

Answer 1

document.body.innerHTML +=(+=重要) を使用すると、ドキュメントの本文にコンテンツを追加できます。

id画像を含む段落に (属性) を追加する必要があります。

<p id="garden">
    <img src="flower.jpg" onClick="makeFlower()">
</p>

gardenこれで、次のターゲットを設定できますdocument.getElementById("garden")。

flowers = 1;
function makeFlower() {

    if (flowers < 10 ) {

        document.getElementById("garden").innerHTML +="<img src='flower.jpg'>";

        flowers ++;
    }
}

これで始められます。