Question

我的目标是在函数中包含 Element.ID ，然后获取它们的值或文本。减少代码行也很重要，因为还有许多其他按钮具有相同的规则。

所以，我尝试了以下代码和其他许多代码来获得适当的结果。

我该如何解决？

＆＃13;

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;
  }
};

＆＃13;

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

＆＃13;

Answer 1

嗯，.addEventListener()的第二个参数必须是函数引用，而不是＆＃34;松散＆＃34;要执行的代码。所以，如果你想调用另一个函数并传递一个参数，那么该行应该是：

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

现在，你正在使用id元素，但实际上只需要id来获得元素的初始引用。一旦你掌握了它，你就可以使用它。

你这里有很多不必要的代码。 另外，我假设（可能不正确）您希望两个按钮都具有相同的click行为，这就是我正在进行的操作。

＆＃13;

// 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;
 }
}

＆＃13;

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

＆＃13;

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) {

}

使用javascript更改按钮文本/值

2 个答案: