javascript/html：第二个onclick属性

我有一个图像 - image1.png。当我第一次点击一个按钮时，我希望它更改为image2.png。当我再次单击该按钮时，我希望它更改为另一个图像image3.png。javascript/html：第二个onclick属性

到目前为止，我已经完全变成了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功能的清洁剂。尽管如此，我仍然接受所有解决方案

来源

2016-11-11 Jeckyy

使用'addEventListener' –

检查单击处理程序中src属性的值，然后相应地更改它 –

[this]（http://stackoverflow.com/questions/20997687/javascript-hiding-and-showing-div-tag -with-a-toggle-button）可能有帮助 –

-5

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

来源

2016-11-11 14:05:03

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

来源

2016-11-11 14:08:04

这个解决方案假设有无限数量的图像，但原始问题说只有三个...如果用户点击了1972次，该怎么办？ –

@AykutAteş正如我的回答指出的那样：“如果你有一个数字的上限，那么只需在/ imgCounter ++代码周围出现逻辑即可。” –

@AykutAteş添加简单的'if（cnt <= 3）{//比做点什么}'显然会解决问题 –

试试这个

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

来源

2016-11-11 14:08:46

似乎从第一张图像跳到第三张图像。：/ – Jeckyy

只需使用一个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）。请记住，这只有在您想要旋转的图像文件数量有限的情况下才有效，否则使用计数器会更好。

希望这会有所帮助。

来源

2016-11-11 14:10:18 DibsyJr

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

我们可以使它更简单

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

来源

2016-11-11 14:12:26

'cnt'需要从2开始，否则第一次点击按钮不会改变图像，除非你移动'cnt ++'，以便它在src'赋值之前。 –

@ScottMarcus谢谢你是对的，我说得对 –

检查下面的代码，如果你把它作为一个循环：

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>

来源

2016-11-11 14:24:52 selvassn

javascript/html：第二个onclick属性

回答

相关问题