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

function changeImage(){
  document.getElementById("image").attr("src","image2.png");
}

Answer 2

您需要一个计数器来增加图像编号。只需将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>

Answer 3

如果您将其设置为循环，请检查以下代码：

JS

    var imgArray = ["image1.png", "image2.png", "image3.png"];


        function changeImage(){
            var img = document.getElementById("image").src.split("/"),
                src = img[img.length-1];                        

                idx =   imgArray.indexOf(src);
                if(idx == imgArray.length - 1)      {
                    idx = 0;
                }
                else{
                    idx++;
                }
                document.getElementById("image").src = imgArray[idx];                   
        } 

html

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

Answer 4

为了实现您的场景，我们必须使用计数器标志来分配下一个图像。这样我们就可以扔了。

我们可以让它更简单

var cnt=1;
function changeImage(){
    cnt++;
    document.getElementById("image").src=  = "image" + cnt + ".png";        
}  

Answer 5

只需使用 if 语句来确定图像的当前来源是什么，如下所示：

function changeImage(){
    var imageSource = document.getElementById("image").src;
    if (imageSource == "image1.png"){
        imageSource = "image2.png";
    }
    else if (imageSource == "image2.png"){
        imageSource = "image3.png";
    }
    else {
        imageSource = "image1.png";
    }
} 

这应该使图像在 3 个不同的图像文件（image1.png、image2.png 和 image3.png）之间旋转。请记住，这仅在您要旋转的图像文件数量有限时才有效，否则最好使用计数器。

希望这会有所帮助。

Answer 6

试试这个

function changeImage(){
    var img = document.getElementById("image");
    img.src = img.src == 'image1.png' ? "image2.png" : "image3.png";
}