Question

我是Java的新手，并试图通过调用函数removeError（）来消除按键事件中的错误消息，但是我始终使用以下代码获取Uncaught TypeError。我认为'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>

Answer 2

这是指此功能中的窗口。

您可以将对象传递给keyup处理程序中的函数。

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

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

我希望这会有所帮助。

Answer 3

您可以将id作为参数传递给函数。

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

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

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

无法使用this.id为输入字段设置ID

3 个答案: