ボタンのテキスト/値をjavascriptでクリックして変更する

Question

私の目標は、function内にElement.IDを含めることで、値またはテキストを取得します。同じ規則を持つ多くのボタンがあるので、コード行を減らすことも重要です。

私は適切な結果を得るために以下のコードなどを試しました。

どうすれば修正できますか？

var el = document.getElementById("p1"); 
 
var id = document.getElementById("p1").id; 
 

 
el.addEventListener("click", modifyText(id), false); 
 

 
function modifyText(e) { 
 
    var x = e.value; 
 
    if (x < 40) { 
 
    e.value = 1; 
 
    } 
 
};

<input id="p1" type="button" class="button" value=0> 
 
<input id="pn" type="button" class="button" value=0>

Answer 1

さて、.addEventListener()第2引数は、関数の参照ではなく、実行するための "ルーズ" コードでなければなりません。あなたが別の関数を呼び出し、それに引数を渡したいのであれば、行は次のようになります。

今

el.addEventListener("click", function(){modifyText(id)}, false); 

、あなたは、要素のidのうちのかなりのビットを作っているが、あなたは本当にのみを取得するidが必要要素への最初の参照。一度それを持っていると、あなたはそれを使って作業することができます。

ここでは不要なコードがたくさんあります。 また、どちらのボタンも同じclickの動作をしたいと思っています（おそらく間違っていると思います）ので、これは私が進めていることです。

// You only need to get a reference to the element in question 
 
var el1 = document.getElementById("p1"); 
 
var el2 = document.getElementById("pn"); 
 

 
// Set up each button to use the same click callback function 
 
// The second argument needs to be a function reference 
 
el1.addEventListener("click", modifyText); 
 
el2.addEventListener("click", modifyText); 
 

 
function modifyText(){ 
 
// When inside of an event handler, "this" refers to the element 
 
// that triggered the event. 
 
if (this.value < 40) { 
 
    this.value = 1; 
 
} 
 
}

<input id = "p1" type="button" class="button" value=0> 
 
<input id = "pn" type="button" class="button" value=0>

Answer 2

イベントリスナーコールバック（特に修飾しない限り、または矢印の関数を使用して）要素の実行コンテキストで実行される傾向があります。つまり、要素を参照するにはthisというキーワードを使用できます。だから、コールバックの内側に、あなたはまた、（要素の種類に応じて）あなたはにaddEventListenerが間違っていたと呼ばれる方法を

function modifyText() { 
var x = this.value; 
if (x < 40) { 
    this.value = 1; 
} 
} 

をthis.value/this.innerTextを使用することができます。

.addEventListener（ "click"、modifyText（id）、false）;

これはすぐにmodifyTextを実行し、関数の戻り値をコールバックとして使用します。あなたの関数が何も返さないので、コールバックとして何も設定されていません。その後、関数定義

function modifyText(passedValue,event) { 

}