如何更改图像onclick javascriptfunction？

我遇到了问题，我尝试过几次但结果总是一样，我不知道我的代码有什么问题。 如果单击右图，它将变为左图，但如果单击左图，则不会更改为右图，为什么？ 这是代码：

function changeImage() { if (document.getElementById("changer").src == "imgs/left.gif") { document.getElementById("changer").src = "https://stackoverflow.com/questions/18502734/how-to-change-image-onclick-javascript-function/imgs/right.gif"; } else { document.getElementById("changer").src = "imgs/left.gif"; } } 

和图像src代码在这里：

我需要这个function：点击（右箭头图像），然后它将变为（左箭头图像）并再次单击相同（左箭头图像）将返回默认值（右箭头图像）。

提前感谢您的时间和帮助。

Answer 1

正如Prabu在他的回答中解释的那样，实际的src是绝对路径而不是相对路径。

解决这个问题：

• 传递元素对象，即将其作为函数的参数。
• 在元素对象内创建一个变量bln ，即该函数中的element 。

---

  ^ pass the element object 

---

  function changeImage(element) { element.src = element.bln ? "https://stackoverflow.com/questions/18502734/how-to-change-image-onclick-javascript-function/imgs/right.gif" : "imgs/left.gif"; element.bln = !element.bln; /* assigns opposite boolean value always */ } 

上面的函数将切换图像src，而不依赖于src属性中存在的值。

样品小提琴

顺便说一句，您也可以使用CSS执行此操作：

工作小提琴

Answer 2

嘿问题是你提到了foldername/filename但是document.getElementById（“changer”）。src给出了像C：\ Users \ ws21 \ Desktop \ imgs \ right.gif这样的fullpath路径

例如

  function changeImage() { //its checking C:\Users\ws21\Desktop\imgs\right.gif=="imgs\left.gif" if (document.getElementById("changer").src == "imgs/left.gif") { document.getElementById("changer").src = "https://stackoverflow.com/questions/18502734/how-to-change-image-onclick-javascript-function/imgs/right.gif"; } else { document.getElementById("changer").src = "imgs/left.gif"; } } 

所以它总是只执行其他部分

Answer 3

试试这个 ：

 $("#changer").click(function(){ imagePath = $("#changer").attr("src"); if(imagePath == "http://behdasht.co/wp/imgs/left.gif"){ $("#changer").attr("src", "http://behdasht.co/wp/https://stackoverflow.com/questions/18502734/how-to-change-image-onclick-javascript-function/imgs/right.gif"); }else{ $("#changer").attr("src", "http://behdasht.co/wp/imgs/left.gif"); } }); //Updated to use jquery completely 

小提琴： http ： //jsfiddle.net/8hGWZ/

http://jsfiddle.net/8hGWZ/2/ （完整jquery）

Answer 4

 function changeImage() { var src = document.getElementById("changer").src; var imgsrc = src.substring(src.lastIndexOf("/")+1); if (imgsrc == "left.gif") { document.getElementById("changer").src = "https://stackoverflow.com/questions/18502734/how-to-change-image-onclick-javascript-function/imgs/right.gif"; console.log('if'+document.getElementById("changer").src); } else { document.getElementById("changer").src = "imgs/left.gif"; console.log('if'+document.getElementById("changer").src); } 

}

使用上面应该工作

FIDDLE DEMO

Answer 5

你有什么应该工作。

这是一个较短的版本：

 function changeImage() { this.src = this.src == "imgs/left.gif" ? "https://stackoverflow.com/questions/18502734/how-to-change-image-onclick-javascript-function/imgs/right.gif" : "imgs/left.gif"; } 

Answer 6

DEMO

HTML

JS

 i=1; function changeImage(el) { el.click=++i; el.src = ((el.click)%2 == 0) ? "https://stackoverflow.com/questions/18502734/how-to-change-image-onclick-javascript-function/imgs/right.gif" : "imgs/left.gif"; } 

Answer 7

嘿尝试javascript中的图像的完整路径

 if (document.getElementById("changer").src == "http://mydomain.com/imgs/left.gif") { document.getElementById("changer").src = "http://mydomain.com/https://stackoverflow.com/questions/18502734/how-to-change-image-onclick-javascript-function/imgs/right.gif"; } 

有些浏览器在src中使用完整的url

或者你可以检查一下

Answer 8

问题得到了解决。 这里是完整的答案：我们应该使用图像URL的全部路径，否则它将工作。

  function changeImage() { if (document.getElementById("changer").src == "HTTP://YOURDOMAIN/left.gif") { document.getElementById("changer").src = "HTTP://YOURDOMAIN/right.gif"; } else { document.getElementById("changer").src = "HTTP://YOURDOMAIN/left.gif"; } } 

特别要感谢Prabu Parthipan

还有另一种方法：

如果我们使用（this），则无需使用图像url的完整路径。 在这种情况下，我应该感谢MR GREEN ……！