2013-04-21 60 views
0

使用Javascript,我想在兩張圖像之間打開和關閉。 到目前爲止,我使用的是櫃檯,然後我的innerHTML基於關閉計數器是否偶數或奇數圖像被點擊更新javascript中的innerHTML,但擦除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> 
+0

警報(x)的內部功能!你會明白爲什麼第二次不工作! – rach 2013-04-21 22:33:07

+0

很多代碼實際上沒有意義:'div1.appendChild.innerHtml = y;'這只是將屬性添加到appendChild-function – Kenneth 2013-04-21 22:33:15

回答

2

如果你只是試圖達到的肘節效應,這樣的事情應該工作:

<!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> 
+1

這可以防止覆蓋原始代碼所具有的跨度的問題。 +1,我正在刪除我的答案。 – Floris 2013-04-21 22:43:40

+0

我讓它變得比它的複雜得多。謝謝! – KARINA 2013-04-21 22:46:36

+0

仍然太複雜= P存儲一個引用到你的img和'img.src = ++ x%2? 'image1.jpg':'img2.jpg' – plalx 2013-04-21 22:49:49