Question

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

这整个计划似乎有效，但没有。我只能改变一次图像的颜色。第二次点击后，没有任何反应。我的意思是我只能将颜色从红色变为蓝色。你能帮我解决一下原因吗？

Answer 1

以下是解决方案：

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

Answer 2

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

点击此STACKOVERFLOW链接==＆gt; Change an image with onclick()

感谢名单

Answer 3

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

在if语句

之前移动此函数

Answer 4

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

尝试此代码。只需确保使用（img.src.match） 。然后在体内编写脚本。

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"
            }  
})

<img src="images/image1.jpg" id="image1" />

Answer 6

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)"/>

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

6 个答案: