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

Question

我正在观看有关如何创建待办事项列表的视频。我遵循了教程中显示的每一行代码，但对我来说不起作用。当我按下按钮时，它应该创建一个列表项。相反，它给了我错误：“未捕获的语法错误：意外的标识符”。你能告诉我我做错了什么吗？// selectorsconst todoInput = document.querySelector('.todo-input');const todoButton = document.querySelector('.todo-button');const todoList = document.querySelector('.todo-List');// event listenerstodoButton.addEventListener('click', addTodo)// functionsfunction 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 class="todo-list">
  </ul>

但在你的 JS 中你有：

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

它应该todo-list与 HTML 中的相同：

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

另请看这一行：

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

您在尝试添加class属性时转义了字符串。它应该是：

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

下面几行你做对了。您的代码编辑器应该突出显示这一点。

Answer 2

第 26 行：用单逗号代替双逗号。使用：外部双逗号内的单逗号或单逗号内的双逗号。

"<i class='fas fa-check'> </i>"是正确的。

不是这个："<i class='fas fa-check'> </i>"

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