如何在此场景中触发关键帧设置事件

Question

在这种情况下，我如何触发密钥锁定事件

function check(form) {
form.addEventListener("keyup", event => {
if(event.target.value === "") {
form.querySelector(".error").innerText = "required"
} else {
form.querySelector(".error").innerText = ""
}
})

}
check(document.querySelector("#form1"))

<form id="form1">
<label>Name</label> <br />
<input type="text" />


<span class="error"> </span>
</form>

我想被要求放置在没有硬编码的情况下。目前，只有当我触发自己的键事件时，它才能工作

基本上，当我运行这个代码时，需要的应该已经在屏幕上了，因为输入是空的

Answer 1

解决方案

function check(form) {
// Get all .error elements
const errors = document.querySelectorAll('.error')
// Set inner text to 'required'
errors.forEach(error => error.innerText = 'required')
form.addEventListener("keyup", event => {
if(event.target.value === "") {
form.querySelector(".error").innerText = "required"
} else {
form.querySelector(".error").innerText = ""
}
})
}
check(document.querySelector("#form1"))

<form id="form1">
<label>Name</label> <br />
<input type="text" />      
<span class="error"></span>
</form>

它的工作原理

querySelectorAll(.error)为类.error的每个元素创建一个数组，然后我们创建一个for循环来遍历类.error的所有元素，并将innerText设置为required。