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 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 2

为了实现您的方案，我们必须使用计数器标记来分配下一个图像。 所以我们可以扔它。

我们可以使其更简单

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

Answer 3

尝试这个

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

Answer 4

只需使用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 5

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

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 6

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