javascript - 类型错误：无法读取属性 '#' 未定义的

Question

有两个<input type="text">表单元素和一个button我试图将事件处理程序附加到 via .forEach()。在尝试访问每个元素时，会引发以下错误：

• Uncaught TypeError: Cannot read property '#<HTMLInputElement>' of undefined

但是，如果我将事件处理程序单独硬编码到这些元素中的每一个，则不会引发主题错误。这是怎么回事？

JS

失败

const login_container = document.querySelector(".login_form_container");
const username_field = document.getElementById("id_login_username");
const password_field = document.getElementById("id_login_password");
const post_login = document.getElementById("post_login");

login_container.addEventListener("mouseout", function(event) {
  this.classList.add("shift");
})

[post_login, username_field, password_field].forEach((widget) => {
    widget.addEventListener("mouseover", function(event) {
      login_container.classList.remove("shift");
    })
})

通行证

post_login.addEventListener("mouseover", function(event) {
    login_container.classList.remove("shift");
})

username_field.addEventListener("mouseover", function(event) {
    login_container.classList.remove("shift");
})

password_field.addEventListener("mouseover", function(event) {
    login_container.classList.remove("shift");
})

HTML

    <div class="login_form_container shift slide">
      <form class="login_form">
      {% for field in login_form %}
        {{ field }}
      {% endfor %}
        <button id="post_login" class="login_button" type="button">Access</button>
      </form>
    </div>

标签： javascript

Answer 1

JSFiddle显示一个警告，解释正在发生的事情。

调用后没有任何分号.addEventListener，这意味着 JavaScript 解析器将数组字面量解释为addEventListener.

并且由于post_login不是undefined（返回值）的有效索引，它会抛出一个TypeError.

login_container.addEventListener(...)[post_login, ...].forEach(...)

您可以通过在每次调用后简单地添加分号来修复它。