2016-12-04 7 views
0

私はこの "this"を機能させるために、関数が適用されている/ HTML要素にバインドすることを試みてきました。私は、複数のHTML要素に同じ関数を適用することを可能にするために汎用的にしています。これをHTML要素にバインドする

注:

私は可能な限り普遍としての機能を維持したいので、私は、IDSやクラスや、そのようなを台無しにしたくありません。

<!doctype html> 
<html> 
<body> 

<input type="button" value="Old" onClick="Change(this);"> 

<script type="text/javascript"> 
function Change(){ 
    this.innerHTML = "New"; 
}; 
</script> 

</body> 
</html> 
+0

入力タグには、指定された例の閉じ角括弧がありません。 – JosephGarrone

+0

申し訳ありません。私はファイルの簡単なコピーを作成しましたが、私は明らかに閉じ括弧をキャッチしませんでした。しかしそれは存在するので、問題を解決しません。 – Unknown96

+0

'Change'への引数として' this'を渡します...何もバインドせず、引数を渡します.. 'function Change(element){element.innerHTML =" New "; } 'は働くだろう –

答えて

2

innerHTMLはこの場合は機能しません。これが入力であるため、valueを代わりに使用してみてください。

var input = document.querySelector('input'); 
 

 
input.addEventListener('click', Change); 
 
    
 
function Change(){ 
 
    this.value = "New"; 
 
    this.removeEventListener('click', Change); 
 
}
<input type="button" value="Old" />

+0

聞いてうれしい。これを正解としてマークしてもよろしいですか? –

0

問題は、ページがinputに当たったときChange関数が定義されていないということです。次のことを試してください:私はChange.call(this)inputonClickを変更した

<!doctype html> 
<html> 
<body> 

<script type="text/javascript"> 
function Change(){ 
    this.value = "New"; 
}; 
</script> 

<input type="button" value="Old" onClick="Change.call(this);"> 

</body> 
</html> 

注意。そして、スクリプトはコントロールの前にロードされます。

working fiddle here.が表示されます。JavaScript設定は、スクリプトが頭にロードされるように設定されています(JavaScriptセクションのコックにヒットします)。

+0

downvoterはなぜこれがdownvotedされた説明してもらえますか?これは正解です。 – JosephGarrone

関連する問題