在javascript中更新innerHTML，但删除过去的innerHTML_Javascript_Events_Toggle_Handler

在javascript中更新innerHTML，但删除过去的innerHTML

javascript events

在javascript中更新innerHTML，但删除过去的innerHTML,javascript,events,toggle,handler,Javascript,Events,Toggle,Handler,使用Javascript，我想在两个图像之间切换开关。到目前为止，我正在使用一个计数器，然后根据单击图像时计数器是偶数还是奇数来更改innerHTML 在我第一次单击图像时，它会替换已经存在的图像，但在第一次单击后，它会继续添加图像。如何使其在第二次后更改图像，而不是在单击时添加图像 <!DOCTYPE html> <html> <head> <script> var x = 0; function myFu

使用Javascript，我想在两个图像之间切换开关。到目前为止，我正在使用一个计数器，然后根据单击图像时计数器是偶数还是奇数来更改innerHTML

在我第一次单击图像时，它会替换已经存在的图像，但在第一次单击后，它会继续添加图像。如何使其在第二次后更改图像，而不是在单击时添加图像

<!DOCTYPE html>
<html>
  <head>
    <script>
      var x = 0;
      function myFunction() {
        x++;
        var div1 = document.getElementById('div1');
        if (x % 2 != 0) {
          var y = document.write('<img src="http://www.computric.com/wp-content/uploads/2011/09/119709197585381818TzeenieWheenie_Power_On_Off_Switch_red_2.svg_.med_.ng" alt="sometext" onclick=myFunction()>');
          div1.appendChild.innerHtml = y;
        } else if (x % 2 == 0) {
          var y = document.write('<img src="http://0.tqn.com/d/pcsupport/1/0/Y/A/-/-/on.jpg"       alt="some_text" onclick=myFunction()>')
          div1.appendChild.innerHTML = y;
        }
      }
    </script>
  </head> 
  <body>
    <div id="div1" style="font-size:12px" onclick=myFunction()> <span onclick=myFunction()>
     <img src="http://0.tqn.com/d/pcsupport/1/0/Y/A/-/-/on.jpg" alt="some_text">
     </span> 
    </div>
  </body>
</html>


var x=0；
函数myFunction（）{
x++；
var div1=document.getElementById（'div1'）；
如果（x%2！=0）{
变量y=文件写入（“”）；
div1.appendChild.innerHtml=y；
}如果（x%2==0），则为else{
var y=文件。写入（“”）
div1.appendChild.innerHTML=y；
}
}

如果您只是想实现切换效果，那么类似的方法应该可以奏效：

<!DOCTYPE html>
 <html>
 <head>

<script>
var x=0;
function myFunction(){
    var div1=document.getElementById('div1');
    if(x==0){
        x=1;
        document.getElementById("myimgid").src = "http://www.computric.com/wp-content/uploads/2011/09/119709197585381818TzeenieWheenie_Power_On_Off_Switch_red_2.svg_.med_.ng";
    }
    else{
        x=0;
        document.getElementById("myimgid").src = "http://0.tqn.com/d/pcsupport/1/0/Y/A/-/-/on.jpg";
    }
}

</script>
 </head>
 <body>


 <div id="div1" style="font-size:12px" onclick=myFunction()>
 <span>
 <img id="myimgid" src="http://0.tqn.com/d/pcsupport/1/0/Y/A/-/-/on.jpg" alt="some_text">
 </span>
 </div>

 </body>
 </html>


var x=0；
函数myFunction（）{
var div1=document.getElementById（'div1'）；
如果（x==0）{
x=1；
document.getElementById（“myimgid”）.src=”http://www.computric.com/wp-content/uploads/2011/09/119709197585381818TzeenieWheenie_Power_On_Off_Switch_red_2.svg_.med_.ng";
}
否则{
x=0；
document.getElementById（“myimgid”）.src=”http://0.tqn.com/d/pcsupport/1/0/Y/A/-/-/on.jpg";
}
}

警报（x）内部功能！你会明白为什么它不能第二次工作！您的许多代码实际上没有意义：

div1.appendChild.innerHtml=y

这只是向appendChild函数添加了一个属性，这可以防止覆盖跨度的问题，而原来的代码是这样的+1，我删除了我的答案。我把它弄得比必须的复杂得多。非常感谢。仍然太复杂=P存储对img的引用，并且

img.src=++x%2？“image1.jpg'：'img2.jpg'