Question

此代码是onclick函数的一部分。该功能应该显示一些计算结果和div中的对应图像（“ gallerym”）。一切正常，但是当用户单击按钮多次触发onclick时，它将创建更多div（gallerym），

我只能使此功能使用一次：this.onclick = null，但现在用户只能单击一次（此后他将不得不刷新页面才能再次使用）

我的问题是：如何确保该功能在不增加新DIVS的情况下创建相同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"  }

如何使onclick函数在同一div中创建图像？

2 个答案: