打开和关闭灯

我想制作一个程序，当你点击一个灯时，灯泡会打开，然后如果你再次点击它，它会关闭。我有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

打开和关闭灯

回答

相关问题