如何使onclick功能在同一個div中創建圖像？

Question

此代碼是onclick函數的一部分。 該函數應該在div（“gallerym”）中顯示一些計算結果和相應的圖像。 一切正常，但當用戶點擊按鈕多次觸發onclick時，它會創建更多的div（gallerym），

我只能使用以下函數使該函數工作一次：this.onclick = null但現在用戶僅限一次點擊（之后他將不得不刷新頁面再次使用它）

我的問題是：如何確保功能會在不創建新DIV的情況下創建同一個DIV中的圖像？

謝謝！

var inputgal = document.getElementById('cmbar').value;
if (inputgal > 10 && inputgal <= 100) {
   var img = document.createElement("img");
   img.src = "../images/gallery/10cmto100cmm600x600.jpg";
   var src = document.getElementById("gallerym");
   src.appendChild(img);
} else if (inputgal > 100 && inputgal <= 1000) {
      var img = document.createElement("img");
      img.src = "../images/gallery/1mto10mm600x600.jpg";
      var src = document.getElementById("gallerym");
      src.appendChild(img);
}

Answer 1

將“img”更改為“IMG”並將子項附加到一個語句中，而不是將其分配給變量。 這個解決方案對我有用： https ： //www.w3schools.com/jsref/tryit.asp？filename = tryjsref_img_src

var inputgal = document.getElementById('cmbar').value;

if (inputgal > 10 && inputgal <= 100) {
   var img = document.createElement("IMG");
   img.src = "...";
   document.getElementById("gallerym").appendChild(img);
} else if (inputgal > 100 && inputgal <= 1000) {
      var img = document.createElement("IMG");
      img.src = "...";
      document.getElementById("gallerym").appendChild(img);
}

Answer 2

/// HTML //

      <div id="gallerym"> <img id ="gallerymain" src = "default image.jpg" >
      </div


       //JAVASCRIPT//


  if (inputgal > 10 && inputgal <= 100) {

       document.getElementById("gallerymain").src = "image1.jpg"  } 

  else if (inputgal > 100 && inputgal <= 1000) {

       document.getElementById("gallerymain").src = "image2.jog"  }