Question

我正在复习 Javascript 技能 [关闭]

2021-05-12

59

javascript

apps.js:7 未捕获 TypeError：无法读取 null 的属性“addEventListener”

我遇到了此错误。

这是我的 HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link rel="stylesheet" href="./style/style.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
    <title>Todo List</title>
</head>
<body>
    <header>
        <h1>Todo List</h1>
    </header>
    <form >
        <input type="text" class="todo-input">
        <button class="todo-btn" type="submit">
            <i class="fas fa-plus-square"></i>
        </button>
    </form>
    <div class="todo-container">
        <ul class="todo-list">
        </ul>
    </div>


    <script src="./js/apps.js" defer></script>
</body>

</html>

这是我的 JS 代码

//Selectors
const todoInput = document.querySelector('todo-input');
const todoButton = document.querySelector('todo-btn');
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");
    //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.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-check"></i>'
    trashButton.classList.add("complete-btn");
    todoDiv.appendChild(trashButton);

    //APPEND TO LIST
    todoList.appendChild(todoDiv);

}

我目前正在复习 javascript 技能。我在 youtube 上关注某人的作品，遇到了此错误。有人可以解释并告诉我有关此错误的信息以及如何修复它吗？谢谢！

有人可以帮我解决问题吗？非常感谢

Answer 1

如果您使用的是 document.querySelector(...) ，则应选择带有 . （句点）的类和带有 # 作为前缀的 id，就像在 jQuery 中一样。在您的示例中为 document.querySelector('.todo-btn') 。

否则，您可以使用 document.getElementsByClassName('todo-btn')

Answer 2

您好，使用 querySelector 或 querySelectorAll 时不要忘记 . 和 # (class 和 id)。

您的错误已修复：

const todoInput = document.querySelector(".todo-input");
const todoButton = document.querySelector(".todo-btn");
const todoList = document.querySelector(".todo-list");