你在html中显示元素时遇到了问题。显示逻辑不应该在添加逻辑。下面是重写的代码

const todoList = [];
const todoListElement = document.querySelector('.js-todo-list');

function addTodo() {
    const inputElement = document.querySelector('.js-input');
    const todoName = inputElement.value;

    if (todoName.trim() !== '') {
        todoList.push(todoName);
        displayTodoList();
        inputElement.value = '';
    }
}

function removeTodo(index) {
    todoList.splice(index - 1, 1);
    displayTodoList();
}

function displayTodoList() {
    todoListElement.innerHTML = '';

    todoList.forEach((todoName, index) => {
        const listItem = document.createElement('li');
        listItem.className = 'js-todo-items';
        listItem.textContent = `${index + 1}. ${todoName}`;

        const completeButton = createButton('✅', () => todoFinished(index + 1));
        const removeButton = createButton('🚫', () => removeTodo(index + 1));

        todoListElement.appendChild(listItem);
        todoListElement.appendChild(completeButton);
        todoListElement.appendChild(removeButton);
        todoListElement.appendChild(document.createElement('br'));
    });
}

function createButton(text, onClick) {
    const button = document.createElement('button');
    button.className = 'final-button';
    button.textContent = text;
    button.onclick = onClick;
    return button;
}

function todoFinished(index) {
    // Implement your logic for marking a todo as finished (if needed)
    console.log(`Todo at index ${index} is marked as finished.`);
}

// Initial display
displayTodoList();