javascript/html:第二个onclick属性

Question

我有一个图像 - image1.png.当我第一次单击按钮时,我希望它更改为image2.png.当我第二次单击该按钮时,我希望它更改为另一个图像,image3.png.

到目前为止,我已经完全改变了image2,很容易.我只是想找到一种方法来改变它.

HTML:

<img id="image" src="image1.png"/>

<button onclick=changeImage()>Click me!</button>

JavaScript的:

function changeImage(){

document.getElementById("image").src="image2.png";

}   

我知道我可以在按钮代码中使用HTML更改图像源,但我相信使用JS功能会更清晰.我对所有解决方案持开放态度.

Answer 1

你需要一个计数器来提升图像编号.只需将maxCounter变量设置为您计划使用的最高图像编号即可.

另请注意,此代码删除了内联HTML事件处理程序,这是一种将HTML挂钩到JavaScript的过时方式.不推荐使用它,因为它实际上围绕您的回调代码创建了一个全局包装函数,并且不遵循W3C DOM Level 2事件处理标准.它也不遵循Web开发的"关注点分离"方法.最好使用.addEventListener将DOM元素连接到事件.

// Wait until the document is fully loaded...,
window.addEventListener("load", function(){

  // Now, it's safe to scan the DOM for  the elements needed
  var b = document.getElementById("btnChange");
  var i = document.getElementById("image");

  var imgCounter = 2; // Initial value to start with
  var maxCounter = 3; // Maximum value used

  // Wire the button up to a click event handler:
  b.addEventListener("click", function(){

    // If we haven't reached the last image yet...
    if(imgCounter <= maxCounter){
      i.src = "image" + imgCounter + ".png";
      console.log(i.src);
      imgCounter++;
    }
  });
  
});  // End of window.addEventListener()

<img id="image" src="image1.png">

<button id="btnChange">Click me!</button>