Why my to-do list in js dosen't add new tasks?

February 25, 2024

I tried to make small to-do list in js, but the problem is when i click on submit button – nothing happens. Can you tell me what is the problem and which way is the best to solve it

here is my code in html and js

HTML

<body>

    <div class="container">
        <h2>To-do App <img src="img/logo.png" alt="logo" class="logo"></h2>

        <div class="row">
        <input type="text" id="input" placeholder="Add your task">
        <button id="button" onclick="addTask">Submit</button>
        </div>
        
        <ul id="task-container">
            <!-- <li class="checked">task 1</li>
            <li class="task">task 2</li>
            <li class="task">task 3</li> -->
        </ul>
    </div>

</body>

let input = document.getElementById('input');
let taskContainer = document.getElementById('task-container');

function addTask() {
    if(input.value === ''){
        alert ('No tasks for today?');
    } else {
        let li = document.createElement("li");
        li.innerHTML = input.value;
        taskContainer.appendchild(li);
    }
}

I would like to understand what the problem is in this code, where exactly I got mistakes. I would be very grateful if you could tell me what the problem is here and what ways there are to solve it

>Solution :

There is an error on functon call. You should use this:

<button id="button" onclick="addTask()">Submit</button>

Or you can use event listener like:

const button = document.getElementById('button');
button.addEventListener('click', () => {
    if(input.value === ''){
        alert ('No tasks for today?');
    } else {
        let li = document.createElement("li");
        li.innerHTML = input.value;
        taskContainer.appendChild(li);
    }
}),