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

Answer 1

imgfunctionと element の id の両方に名前を付けたことが原因である可能性がありますimg。

ブラウザは実際に ID をグローバル変数として使用します。したがって、id を持つ要素を作成するだけで、img基本的に作成されwindow.imgた .

グローバルオブジェクトに変数が漏れるのを避けるために、マークアップにコードを含めるだけでなく、コードをIIFEでラップするのではなく、関数の名前を次のような名前に変更してJavaScriptメソッドswapImgを使用することをお勧めします...thisonclickonclickwindow

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

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