Javascript 使用“事件”更改图像src；onclick"； var image=document.getElementById（“imageOne”）；函数changeColor（）{ if（image.src==“circleRed.png”）{ image.src=“circleBlue.png”； }否则{ image.src=“circleRed.png”； } }_Javascript_Html

Javascript 使用“事件”更改图像src；onclick"； var image=document.getElementById（“imageOne”）；函数changeColor（）{ if（image.src==“circleRed.png”）{ image.src=“circleBlue.png”； }否则{ image.src=“circleRed.png”； } }

javascript html

Javascript 使用“事件”更改图像src；onclick"； var image=document.getElementById（“imageOne”）；函数changeColor（）{ if（image.src==“circleRed.png”）{ image.src=“circleBlue.png”； }否则{ image.src=“circleRed.png”； } },javascript,html,Javascript,Html,整个程序似乎都能工作，但不行。我只需要改变一下图像的颜色就行了。第二次单击后，什么也没有发生。我的意思是我只能把颜色从红色改成蓝色。你能帮我找出原因吗 <!DOCTYPE html> <html> <body> <img id = "imageOne" src = "circleRed.png" onclick = "changeColor()"/> <script> var image = document.getElemen

整个程序似乎都能工作，但不行。我只需要改变一下图像的颜色就行了。第二次单击后，什么也没有发生。我的意思是我只能把颜色从红色改成蓝色。你能帮我找出原因吗

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

将此内部函数移到if语句之前

以下是解决方案：

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


var image=document.getElementById（“imageOne”）；
函数changeColor（）
{
if（image.getAttribute（'src'）==“circleRed.png”）
{
image.src=“circleBlue.png”；
}
其他的
{
image.src=“circleRed.png”；
}
}

image.src

返回图像的物理路径。因此，您可以使用

indexOf

来匹配图像名称。下面的代码片段可能会对您有所帮助

函数更改颜色（图像）{
if（image.src.indexOf（“circleRed.png”）>-1）{
image.src=“circleBlue.png”；
}否则{
image.src=“circleRed.png”；
}
}

试试这段代码。只需确保使用（img.src.match） .和正文内的脚本。

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

函数更改颜色（图像）{
if（image.src.indexOf（“circleRed.png”）>-1）{
image.src=“circleBlue.png”；
}否则{
image.src=“circleRed.png”；
}
}

您缺少结账

。这只是一个输入错误，对吗？@AnikIslamAbhi是的，这只是一个输入错误，对不起，你可以这样检查

image.src.indexOf（“circleRed.png”）>-1

。。这意味着图像是真实的circleRed@AnikIslamAbhi哦，好的。顺便问一下，你叫什么“indexOf”？它是一个属性吗？indexOf是一个扩展方法。它将检查它是否包含在字符串或and数组中。。如果它包含，它将返回索引else-1。尝试将脚本标记移动到head部分，并为脚本标记指定type属性。您能告诉我为什么这样做有效吗？为什么我的不起作用呢？因为image.src返回图像的完整路径，所以比较将为false，当您使用getAttribute（'src'）时，它将返回文件名，而比较将返回true

var img = document.getElementById("image1");
img.addEventListener("mouseover", function(){
      if(img.src.match("images/image1.jpg")){
           img.src ="images/image1_2.jpg";}
       else {
           img.src = "images/image1.jpg"
            }  
})