待办列表代码报错咨询：Uncaught SyntaxError问题排查

Hey there, let's break down why your todo list isn't working and fix those issues step by step!

1. Critical DOM Selector Mismatch #

First up, this is the root cause of your syntax error:
In your JavaScript, you're targeting a class with a capitalized "L":

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

But in your HTML, the actual <ul> class uses a lowercase "L":

<ul class="todo-list"></ul>

JavaScript is case-sensitive, so this selector can't find the element—leading to errors when you try to append items later.

Fix: Update the JS selector to match the HTML class exactly:

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

2. Incorrect innerText vs innerHTML for Icon Buttons #

You're using innerText to set HTML icon markup, which treats the tags as plain text instead of rendering them. Plus, you've got unnecessary escaped characters (<, ") and a typo in the trash icon class (fa - trash has an extra space).

Fix:

• Use innerHTML to render the icon HTML correctly
• Fix the trash icon class name
• Assign the correct class to the trash button (not complete-btn again)

// Check mark button fix
const completedButton = document.createElement('button');
completedButton.innerHTML = '<i class="fas fa-check"></i>';
completedButton.classList.add('complete-btn');

// Trash button fix
const trashButton = document.createElement('button');
trashButton.innerHTML = '<i class="fas fa-trash"></i>';
trashButton.classList.add('trash-btn');

3. Bonus Fixes for Better Functionality #

• Instead of hardcoding "hey" as the todo text, pull the value from your input box:

  newTodo.innerText = todoInput.value;
  

• Clear the input box after adding a todo (for better UX):

  todoInput.value = '';
  

• Fix the typo in your HTML's container class (todo-containre → todo-container) to avoid future styling issues.

Corrected Full Code #

app.js #

// 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 = todoInput.value;
 newTodo.classList.add('todo-item');
 todoDiv.appendChild(newTodo);
 // check mark button
 const completedButton = document.createElement('button');
 completedButton.innerHTML = '<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('trash-btn');
 todoDiv.appendChild(trashButton);
 // append to list
 todoList.appendChild(todoDiv);
 // Clear input
 todoInput.value = '';
}

index.html #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
    <title>Todo list</title>
</head>
<body>
    <header>
        <h1>Teo's TODO list</h1>
    </header>
    <form action="">
        <input type="text" class="todo-input">
        <button class="todo-button" type="submit">
            <i class="fas fa-plus-square"></i>
        </button>
    </form>
    <div class="todo-container">
        <ul class="todo-list">
        </ul>
    </div>
    <script src="./app.js"></script>
</body>
</html>

内容的提问来源于stack exchange，提问作者user13745525