我从 YouTube 频道复制了代码，对我来说不起作用，但在视频中工作正常。我究竟做错了什么？

Question

我正在观看有关如何创建待办事项列表的视频。我遵循了教程中显示的每一行代码，但对我来说不起作用。当我按下按钮时，它应该创建一个列表项。相反，它给了我错误：“未捕获的语法错误：意外的标识符”。你能告诉我我做错了什么吗？

// selectors

const todoInput = document.querySelector('.todo-input');

const todoButton = document.querySelector('.todo-button');

const todoList = document.querySelector('.todo-List');

// event listeners

todoButton.addEventListener('click', addTodo)

// functions

function addTodo(event) {

  // prevent form from submitting

  event.preventDefault();

  // TODO DIV

  const todoDiv = document.createElement('div');

  todoDiv.classList.add('todo');

  // Create LI

  const newTodo = document.createElement('li');

  newTodo.innerText = 'hey';

  newTodo.classList.add('todo-item');

  todoDiv.appendChild(newTodo);

  // check mark button

  const completedButton = document.createElement('button');

  completedButton.innerText = "<i class="fas fa-check "> </i>";

  completedButton.classList.add('complete-btn');

  todoDiv.appendChild(completedButton);

  // check trash button

  const trashButton = document.createElement('button');

  trashButton.innerHTML = '<i class="fas fa - trash"> </i>';

  trashButton.classList.add('complete-btn');

  todoDiv.appendChild(trashButton);

  // append to list

  todoList.appendChild(todoDiv);

}

Answer 1

您的 CSS 选择器之一是错误的。看看你的 HTML 文件 - 你有：<ul&nbsp;class="todo-list"> &nbsp;&nbsp;</ul>但在你的 JS 中你有：const&nbsp;todoList&nbsp;=&nbsp;document.querySelector('.todo-List');它应该todo-list与 HTML 中的相同：const&nbsp;todoList&nbsp;=&nbsp;document.querySelector('.todo-list');另请看这一行：completedButton.innerText&nbsp;=&nbsp;"<i&nbsp;class="fas&nbsp;fa-check">&nbsp;</i>";您在尝试添加class属性时转义了字符串。它应该是：completedButton.innerText&nbsp;=&nbsp;'<i&nbsp;class="fas&nbsp;fa-check">&nbsp;</i>';下面几行你做对了。您的代码编辑器应该突出显示这一点。

Answer 2

第 26 行：用单逗号代替双逗号。使用：外部双逗号内的单逗号或单逗号内的双逗号。"<i class='fas fa-check'> </i>"是正确的。不是这个："<i class='fas fa-check'> </i>"&nbsp;completedButton.innerHTML&nbsp;=&nbsp;"<i&nbsp;class='fas&nbsp;fa-check'>&nbsp;</i>";