Как мне вызвать событие keyup в этом scenerio

#javascript #events

#javascript #Мероприятия

Вопрос:

Как мне вызвать событие keyup в этом сценарии

 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>

Я хочу, чтобы required был размещен без его жесткого кодирования. В настоящее время это работает, только если я сам запускаю событие keyup

В принципе, когда я запускаю этот требуемый код, он уже должен быть на экране, поскольку входные данные пусты

1. Отображение «ошибки» до того, как у пользователя была возможность предпринять действие, по мнению некоторых людей, является плохим пользовательским опытом. Ошибка — это ошибка, допущенная пользователями. В этом случае вы загружаете страницу в состояние, с которого нужно начать. Вряд ли это вина пользователя.

2. Просто случайный пример, который я придумал, моя цель на самом деле — заголовок

3. Используйте свою любимую поисковую систему и найдите «javascript, dispatchEvent()`

Ответ №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.