Javascript 如何为不在页面加载时呈现的元素创建 addEventListener

发布于08月29日

我有一个在你点击按钮后呈现的输入元素，也就是说，它不会在页面加载时呈现. 当用户在元素中输入某些内容时，它应该会在控制台上记录"已点击添加按钮！". 但是，我收到以下错误消息:

Uncaught TypeError: can't access property "addEventListener", document.getElementById(...) is null

代码如下:

export const renderTodo = () => {
    document.querySelector('#main').innerHTML = `
<h2>Todo(CRUD) Page ${import.meta.env.VITE_TEST}</h2>
<br>
<form action="/action_page.php">
    <input type="text" placeholder="New todo.." id="new-todo">
    <br>
    <button id="add-todo">Add</button>
</form> 
`;
};

document.getElementById("new-todo").addEventListener("change", (e) => {
    console.log("Add button clicked!");
});

如何让addEventListener工作？

推荐答案

因为在它被附加到HTMLDOM之前，我们是trying to access,document.getElementById("new-todo")，因为function renderTodo()没有被调用，我们试图访问document.getElementById("new-todo").

export const renderTodo = () => {
    document.querySelector('#main').innerHTML = `
<h2>Todo(CRUD) Page ${import.meta.env.VITE_TEST}</h2>
<br>
<form action="/action_page.php">
    <input type="text" placeholder="New todo.." id="new-todo">
    <br>
    <button id="add-todo">Add</button>
</form> 
`;
// after the HTML string is parsed and attached in DOM then apply. It will be called whenever the function is called.
  document.getElementById("new-todo").addEventListener("change", (e) => {
      console.log("Add button clicked!");
  });
};