Question

todoBtn.addEventListener('click', addTodo);

function addTodo(e) {
    e.preventDefault();
    todoList.innerHTML = `
    <div class="todo">
        <li class="todo-item">hey</li>
        <button class="complete-btn"><i class="fas fa-check"></i></button>
        <button class="trash-btn"><i class="fas fa-trash"></i></button>
    </div>`;
    todoContainer.appendChild(todoList);
}

Answer 1

todoList 不存在，因为您尚未创建它。而是将模板字符串分配给一个变量，并使用 insertAdjacentHTML 将其添加到容器中。

const todoBtn = document.querySelector('button');
const todoContainer = document.querySelector('div');
todoBtn.addEventListener('click', addTodo);

function addTodo(e) {
  const html = `
    <div class="todo">
        <li class="todo-item">hey</li>
        <button class="complete-btn"><i class="fas fa-check"></i></button>
        <button class="trash-btn"><i class="fas fa-trash"></i></button>
    </div>`;
  todoContainer.insertAdjacentHTML('beforeend', html);
}

<button>Click</button>
<div />

Answer 2

该函数每次都执行，问题是你删除和添加相同的元素到容器中，你应该每次都创建一个新元素。

var todoBtn = document.querySelector("#todo");
var todoContainer = document.querySelector("#container");

todoBtn.addEventListener('click', addTodo);

function addTodo(e) {
  e.preventDefault();
  // new element instead of just removing and adding the same one over and over
  var todoList = document.createElement("div");
  todoList.innerHTML = `
    <div class="todo">
        <li class="todo-item">hey</li>
        <button class="complete-btn"><i class="fas fa-check"></i></button>
        <button class="trash-btn"><i class="fas fa-trash"></i></button>
    </div>`;
  todoContainer.appendChild(todoList);
}

<button id="todo">TODO</button>
<div id="container"></div>

Answer 3

它不是一次工作，而是控制台事件并检查元素是否正确。

事件监听器只工作一次

3 个答案: