javascript - 使用事件 "onclick"更改图像 src

标签 javascript html

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

整个程序看似可行,但实际上不行。我只能更改一次图像的颜色。第二次点击后,没有任何反应。我的意思是我只能将颜色从红色更改为蓝色。 你能帮我找出原因吗?

最佳答案

解决方法如下:

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

关于javascript - 使用事件 "onclick"更改图像 src,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34102091/

相关文章:

javascript - 在 jQuery 模板中使用 JavaScript

javascript - 如果 cookie 存在则运行函数

javascript - 获取 JS 中 DOM 元素的计算字体大小

javascript - (初级)HTML + JS 用输入值改变变量

javascript - 如何在 Chrome 扩展程序中将 URL 添加到下载管理器?

javascript - 小型 jquery 解析器

javascript - 当我需要为每个元素使用不同的 id 时,如何通过仅加载一次来多次使用相同的图像

javascript - 使用 JS 循环隐藏显示多个表单字段

html - 如何删除特定标签但保留允许的标签

html - 在 HTML 中,url 包含#,将页面滚动到页眉?