JS関数の<img>タグが呼び出されません

Question

どこに置いても機能しません。 意味、htmlファイルの中でスクリプトタグ内では動作しません。その下にないhideShow関数の上では動作しません。 私は1つのJSファイルとhtmlファイルを持っています。 JSファイルには2つの関数がありますが、最初の関数はうまくいきますが、2番目の関数を呼び出そうとすると、うまくいきません.wclasはonclick = "imgのプロパティは動作します。 ここで言われてJSファイル：

function hideShow(x,y) { 
    var hide = document.getElementById(x); 
    var show = document.getElementById(y); 
    if (!hide.classList.contains("height-zero") && show.classList.contains("height-zero")) { 
     hide.classList.add("height-zero"); 
     show.classList.remove("height-zero"); 
    } else { 
     hide.classList.remove("height-zero"); 
     show.classList.add("height-zero"); 
    } 
} 

function changeSource(x) { 
    this.src = x; 
} 

そして、これは私が

<img src="img/label.png" onClick="changeSource('img/label2.png')"> 

は注意私が持っているIMGタグにそれを置く方法である複数の画像

あなたが thisを渡す必要が

Answer 1

あなたの機能：

<img src="img/label.png" onClick="changeSource(this, 'img/label2.png')"> 

function changeSource(el, x) { 
    el.src = x; 
} 

Answer 2

他の回答に代わって、インラインからスクリプトタグにイベントを割り当てる場合は、thisを使用できます - 今すぐthisはwindowです。

複数の画像を持っている場合は、それらにクラスを与えることができますし、

<img class="labelImage" src="img/label1.png" data-src2="img/label1x.png" /> 
<img class="labelImage" src="img/label2.png" data-src2="img/label2x.png" /> 
<img class="labelImage" src="img/label3.png" data-src2="img/label2x.png" /> 

インラインを使用して

window.onload=function() { 
    var imgs = document.querySelectorAll(".labelImage"); 
    for (var i=0, n=imgs.length;i<n;i++) { 
    imgs[i].onclick=function() { 
     this.src = this.getAttribute("data-src2"); 
     // or possibly this.src = this.src.replace(/label\./,"label2.") 
    } 
    } 
} 

行い、thisも動作しますが、しかし私は、あなたがインライン関数を使用していないお勧めします。

Answer 3

@Justinasの回答の代わりに、01を渡すことですは、この関数呼び出しのコンテキストです。私のコメントと同じように：

changeSource.call(this, "img/label2.png")