打開和關閉燈

我想製作一個程序，當你點擊一個燈時，燈泡會打開，然後如果你再次點擊它，它會關閉。我有onClick，但無論我第一個clikc總是打開哪一個。有人可以幫助點擊燈亮嗎？打開和關閉燈

<!DOCTYPE html> 
<html> 
    <body> 

     <img id="light1" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180"> 

     <img id="light2" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180"> 

     <img id="light3" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180"> 

     <img id="light4" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180"> 


    <script> 
     function changeImage() { 
      var image1 = document.getElementById('light1'); 
      if (image1.src.match("bulbon")) { 
       image1.src = "pic_bulboff.gif"; 
      } else { 
      image1.src = "pic_bulbon.gif"; 
      } 
     } 
    </script> 

    </body> 
</html>

來源

2015-11-16 Michler

這是因爲這個var image1 = document.getElementById（'light1'）;,你只選擇那個1光 – Ljubisa

提示：'var image1 = document.getElementById（'light1'）;' –

protip：學習附加事件處理程序，而不是使用內聯'onclick = something（）' –

在JavaScript中，事件處理程序會得到一個名爲this一個特殊的變量，它是指從該事件是發射（在這種情況下，燈泡，爲點擊），你可以使用它像這樣的元素：

function changeImage() { 
    if (this.src.match("bulbon")) { 
     this.src = "pic_bulboff.gif"; 
    } else { 
     this.src = "pic_bulbon.gif"; 
    } 
}

請注意與代碼的區別。您總是對第一個燈泡進行更改，使用API document.getElementById('light1')通過ID訪問。

來源

2015-11-16 20:13:48 JCOC611

我也要發佈這個，但你打敗了我投票:)這應該工作，我相信！ – Ljubisa

儘管在多個節點上註冊了一個事件處理程序，但您仍然指向函數中的同一個DOM節點。

在函數執行期間，您應該使用this關鍵字將當前單擊的節點用作上下文。

來源

2015-11-16 20:16:58

打開和關閉燈

回答

相關問題