如何两次运行脚本

Question

我在同一页面上有两个相同的表单，并且脚本仅适用于第一个表单。我是一个初学者，这对我来说是一个挑战。我尝试添加`for（var i = 0; i

var el = document.querySelector(".js-tac");
    input = document.querySelector('.js-tel')

input.addEventListener('input', evt => {
    const value = input.value

    if (!value) {
        el.classList.remove("is-visible");
        return
    }
    const trimmed = value.trim()
    if (trimmed) {
        el.classList.add("is-visible");
    } else {
        el.classList.remove("is-visible");
    }
})

Answer 1

document.querySelector返回第一个匹配的元素。因此，您需要document.querySelectorAll来提供集合。然后像这样迭代该集合

document.querySelectorAll('.js-tel').forEach((input)=>{
  // not using arrow function since using this to target the element
  input.addEventListener('input', function(evt){
     const value = this.value
     // rest of the code
 })

})