javascript图像onclick不起作用

标签 javascript html css image onclick

我想点击一张图片,它会变成另一张图片,但它不起作用, 我使用了 w3schools.com 的代码,但它也不起作用

这是代码:

<!DOCTYPE html>
<html>
<body>

<img id="myImage" onclick="changeImage()" src="img/checkoff.png">

<script>
    function changeImage() {
        var image = document.getElementById('myImage');
        if (image.src.match("checkon")) {
            image.src = "checkoff.png";
        } else {
            image.src = "checkon.png";
        }
    }
</script>

</body>
</html>

最佳答案

你的代码有问题

在这里你只使用带有扩展名的图像文件的名称你还需要给出图像的相对文件路径:像这样

function changeImage() {
    var image = document.getElementById('myImage');
    if (image.src.match("checkon")) {
        image.src = "img/checkoff.png";
    } else {
        image.src = "img/checkon.png";
    }
}

在这里你可以查看这个例子。

工作顺利。

希望对你有帮助

function changeImage() {
        var image = document.getElementById('myImage');
        if (image.src.match("generic-image-placeholder")) {
            image.src = "https://cdn.noths-static.com/system/product_images/images/001/037/649/original_set-of-eight-white-heart-name-place-holders.jpg";
        } else {
            image.src = "https://www.webpagefx.com/blog/images/cdn.designinstruct.com/files/582-how-to-image-placeholders/generic-image-placeholder.png";
        }
    }
<!DOCTYPE html>
<html>
<body>

<img id="myImage" onclick="changeImage()" src="https://cdn.noths-static.com/system/product_images/images/001/037/649/original_set-of-eight-white-heart-name-place-holders.jpg">

</body>
</html>

关于javascript图像onclick不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46644959/

相关文章:

javascript - HTML5 canvas 的三种鼠标检测技术,都不够

javascript - React Redux 不调度操作

jquery - 我怎样才能使这个蛮力的 jQuery 优雅化?

jquery - 输入字段中占位符文本的颜色

css - 我应该在前、后、首字母和第一行伪元素中使用单冒号 (:) 还是双冒号 (::)?

javascript - 当 EC2 请求该文件时,S3 上的文件是否通过 EC2 加载到浏览器上

javascript - 带 Raphael JS 的旋钮拨盘

html - iPad 视网膜分辨率与正常分辨率

javascript - 如何使用 html 表格打印乘法表(代码在 Javascript 中)?

jQuery导致元素在点击时跳转