javascript - JavaScript 事件不适用于 getElementById

Question

我对 JS 事件有疑问。我在我的网站上放置了一张图片，并且在 JS 的帮助下，当人们单击该图片时，该src属性将被设置为查找另一张图片。但是什么也没有发生！

<img id="img" src="Login_img1.jpg" width="425" height="219" alt="Hey" onclick="img()">

现在的JS：

function img(){document.getElementById("img").src = "Login_img2.jpg"}

score 3 · Accepted Answer

不要命名你的函数img()。当您使用不等同于全局对象的东西时，它可以正常工作。

score 1 · Accepted Answer

只需使用不显眼的 JavaScript，并放弃 HTMLonclick属性：

var img = document.getElementById('img');
img.onclick = function(){
    img.src = "Login_img2.jpg";
};

score 0 · Accepted Answer

这可能是因为您同时命名了函数img和元素的 id img。

浏览器实际上会使用 ID 作为全局变量。因此，只需创建一个 id 为img您的元素，您就已经创建了window.img.

最好将您的函数重命名为类似swapImg并使用this和 JavaScriptonclick方法，而不是onclick将您的代码放在标记中以及将代码包装在 IIFE 中以避免将变量泄漏到全局window对象中......

(function() {
    document.getElementById('img').onclick = swapImage;

    function swapImage() {
        this.src = 'Login_img2.jpg';
    };
})();

score 0 · Accepted Answer

您已经解决了您的问题。只是想指出您也可以使用事件侦听器来做到这一点。

var oImg = document.getElementById('myImg');
oImg.addEventListener('click', function() {
    this.setAttribute('src', 'Login_img2.jpg');
}, false);

score 0 · Accepted Answer

这可以简单地使用this关键字删除不必要的元素搜索来完成。

<img id="img" src="Login_img1.jpg" width="425" height="219" alt="Hey" onclick="change_img(this)">

function change_img(img){
   img.src = "Login_img2.jpg";
}

5 回答 5