I am refreshing my skills with Javascript

Question

apps.js:7 Uncaught TypeError: Cannot read property 'addEventListener' of null

I have this error.

Here's my HTML code

<!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>

Here's my JS code

//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);

}

I am currently refreshing my skills with javascript. I am shadowing someone's work on youtube and came across with this error. Can anyone explain and enlighten me about the error and how to fix it? Thank you!

Can anyone help me with my problem? Thank you so much

Your selector is wrong: `document.querySelector('todo-btn');` -> `document.querySelector('.todo-btn');` Same with the other ones change them to proper class selectors starting with a dot `.` — VLAZ, May 12 '21 at 15:06
Does this answer your question? [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — tripleee, May 12 '21 at 18:12

score 2 · Answer 1 · answered May 12 '21 at 15:09

2

If you are using document.querySelector(...), you should select classes with . (period) and id's with # as prefix like in jQuery. In your example document.querySelector('.todo-btn').

Otherwise you could use document.getElementsByClassName('todo-btn')

answered May 12 '21 at 15:09

Mitko Petrov

37
4

score 0 · Accepted Answer · answered May 12 '21 at 15:09

0

Hi when using querySelector or querySelectorAll dont forget . and # (class and id).

your error is fixed:

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

answered May 12 '21 at 15:09

Mohammad Mohammadi

260
2
10

1

Thank you for all the help! very much appreciate it! – Joseph Paul Bautista Rago May 13 '21 at 03:26
your welcome my friend. – Mohammad Mohammadi May 15 '21 at 13:47

I am refreshing my skills with Javascript

2 Answers2