使用javascript更改按鈕文字/值

Question

我的目標是將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()的第二個參數必須是函數引用，而不是要執行的“松散”代碼。 因此，如果要調用另一個函數並將其傳遞給參數，則該行應為：

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

事件偵聽器回調通常與元素的執行上下文一起執行（除非進行其他修改或使用Arrow函數）。 這意味着您可以僅使用this關鍵字來引用元素。 因此，在回調中，您可以使用this.value / this.innerText （取決於元素的類型）

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

同樣，您調用addEventListener的方式是錯誤的。

.addEventListener（“ click”，ModifyText（id），false）;

這將立即執行modifyText並將函數的返回值用作回調。 並且由於您的函數不返回任何內容，因此未將任何內容設置為回調。

如果您想將變量傳遞給事件回調，則可以像下面這樣進行操作

el.addEventListener("click", modifyText.bind(el,yourValue),false);

然后，您需要修改函數定義

function modifyText(passedValue,event) {

}