Simpel画像トグル機能が動作しない（jQueryはありません）

Question

私はこの機能をクリックするとシンプルな画像トグルを作ろうとしていますが、何が間違っているのかは分かりません。私はquerySelectorとaddEventListenerを使用しなければならず、jqueryも許可されていません。誰でも私がこれを理解するのを助けてくれますか？私はこのエラーを取得してい

document.querySelector(".imageClass").addEventListener("click", function() { 
    var img = this.src; 
    if(img.src == "/image/location1.png") { 
     img.src = "/image/location2.png"; 
    } else { 
     img.src = "/image/location2.png"; 
    } 
}); 

：プロパティを取得

document.querySelector(...).addEventlistener is not a function(...) 

Answer 1

は、最も可能性の高い絶対URLを返します、そしてあなたが本当にあなたは属性ではなく、プロパティをチェック確認します。

また、あなたが最初にimg.src

そして、あなたの条件の両方のケースでも同じこと

document.querySelector(".imageClass").addEventListener("click", function() { 
    var img = this; 
    var src = img.getAttribute('src'); 

    if(src == "/image/location1.png") { 
     img.src = "/image/location2.png"; 
    } else { 
     img.src = "/image/location1.png"; 
    } 
}); 

Answer 2

はあなたにそれを渡すことによって、あなたのイベントを受け取るんを行うことによって、その後var img = this.srcを行うことによって、二回srcをaccesingしていますパラメーター。そこからイベントのターゲット要素にアクセスし、そのsrc属性を取得できます。

document.querySelector(".imageClass").addEventListener("click", function (e) { 
    var img = e.target; 
    if(img.src == "/image/location1.png") { 
    img.src = "/image/location2.png"; 
    } else { 
    img.src = "/image/location2.png"; 
    } 
});