时间戳

首页 > 解决方案 > 我正在用 Javascript 刷新我的技能

javascript - 我正在用 Javascript 刷新我的技能

问题描述

apps.js:7 未捕获的类型错误：无法读取 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 上的工作并遇到了这个错误。任何人都可以解释并启发我有关错误以及如何解决它吗？谢谢！

谁能帮我解决我的问题？非常感谢

标签： javascript

解决方案

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

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

推荐阅读