使用事件“onclick”更改图像src

<!DOCTYPE html> 
<html> 
<body> 

<img id = "imageOne" src = "circleRed.png" onclick = "changeColor()"/> 

<script> 
var image = document.getElementById("imageOne"); 

function changeColor() { 
if (image.src == "circleRed.png") { 
    image.src = "circleBlue.png"; 
} else { 
    image.src = "circleRed.png"; 
} 
} 
</script> 
</body> 
</html>

此整个程序似乎可以正常工作，但不是。我只能改变一次图像的颜色。第二次点击后，没有任何反应。我的意思是我只能将颜色从红色变成蓝色。你能帮我找出原因吗？使用事件“onclick”更改图像src

来源

2015-12-05 MiguelC

你缺少收盘'}'。它只是一个错字吗？ –

@AnikIslamAbhi是啊这只是一个错字，对不起 – MiguelC

你可以检查像这样'image.src.indexOf（“circleRed.png”）> - 1' ..它的意思是imageRedRed –

这里是解决方案：

<!DOCTYPE html> 
<html> 
    <body> 

     <img id ="imageOne" src ="circleRed.png" onclick = "changeColor()"/> 

     <script> 
      var image = document.getElementById("imageOne"); 

      function changeColor() 
      { 
       if (image.getAttribute('src') == "circleRed.png") 
       { 
        image.src = "circleBlue.png"; 
       } 
       else 
       { 
        image.src = "circleRed.png"; 
       } 
      } 
     </script> 
    </body> 
</html>

来源

2015-12-05 07:03:39

请您告诉我为什么这会起作用？为什么我的不工作？ – MiguelC

，因为image.src返回图像的完整路径，所以比较会变为false，并且当您使用getAttribute（'src'）时，它将返回文件名并且比较将返回true –

如果它的工作plz标记为Accept –

var image = document.getElementById("imageOne");

移动这里面的功能之前，if语句

来源

2015-12-05 06:55:30

我试过了，但它仍然不起作用 – MiguelC

尝试将脚本标记移动到头部并指定脚本标记的类型属性 –

<script language="javascript"> 
    function changeImage() { 

     if (document.getElementById("imgClickAndChange").src == "http://www.userinterfaceicons.com/80x80/minimize.png") 
     { 
      document.getElementById("imgClickAndChange").src = "http://www.userinterfaceicons.com/80x80/maximize.png"; 
     } 
     else 
     { 
      document.getElementById("imgClickAndChange").src = "http://www.userinterfaceicons.com/80x80/minimize.png"; 
     } 
    } 
</script>

点击此链接计算器==>Change an image with onclick()

感谢名单

来源

2015-12-05 07:10:38

谢谢！我会尝试这一个 – MiguelC

image.src返回图像的物理路径。因此，您可以使用indexOf来匹配图片名称。以下代码片段可能会对您有所帮助。

function changeColor(image) { 
 
    if (image.src.indexOf("circleRed.png")>-1) { 
 
     image.src = "circleBlue.png"; 
 
    } else { 
 
     image.src = "circleRed.png"; 
 
    } 
 
}

<img id = "imageOne" src = "circleRed.png" onclick = "changeColor(this)"/>

来源

2015-12-05 08:19:13 Azim

使用事件“onclick”更改图像src

回答

相关问题