javascript - 无法使用 this.id 设置输入字段的 ID

Question

我是 Javascript 新手，尝试通过调用函数removeError() 来删除按键事件上的错误消息，但我不断收到以下代码的未捕获类型错误。我认为“this.id”应该为我提供 p ID 和“_error”，这样我就可以对多个字段使用相同的函数，因为当我直接调用“fName_error”或“lName_error”时效果很好。任何建议将不胜感激!谢谢!

function removeError() {
  document.getElementById(this.id + '_error').innerHTML = "";
}

<input id="fName" type="text" name="firstName" onkeyup="removeError()" />
<span class="error"><p id="fName_error">Error</p></span>

<input id="lName" type="text" name="lastName" onkeyup="removeError()" />
<span class="error"><p id="lName_error">Error</p></span>

Answer 1

this 指向示例中的窗口对象。一种选择是将 this 作为参数发送给函数。

function removeError(e) {
  document.getElementById(e.id+'_error').innerHTML = "";
}

<input id="fName" type="text" name="firstName" onkeyup="removeError(this)" />
<span class="error"><p id="fName_error">Some Error</p></span>
Last Name

<input id="lName" type="text" name="lastName" onkeyup="removeError(this)" />
<span class="error"><p id="lName_error">Abnother Error</p></span>

或者，您可以使用 addEventListener() 添加事件监听器，这会将事件传递给函数。那么该元素将位于 e.target 中:

document.querySelectorAll('input').forEach(el => {
  el.addEventListener('keyup', removeError)
})

function removeError(e) {
  document.getElementById(e.target.id+'_error').innerHTML = "";
}

<input id="fName" type="text" name="firstName" />
<span class="error"><p id="fName_error">Some Error</p></span>
Last Name

<input id="lName" type="text" name="lastName" />
<span class="error"><p id="lName_error">Abnother Error</p></span>