Question 417461 in Html Question posted in
Some basic documentation can be found here.

Html – Why won't this program display correctly?

I have this HTML page which is meant to display a to-do list and allow users to add tasks to it

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>To-Do List</title>
        <link rel="stylesheet" href="styles.css">
        <script src="/todolist.js" defer></script>
    </head>
    <body>
        <a href="index.html">Homepage</a>
        
        <ul class="todo-list">
            <!-- List items will go here -->
        </ul>
        
        <input type="text" id="new-todo" placeholder="Add a new item">
        <button type="button" id="add-todo">Add To Do</button>
    </body>
</html>

and this script which should use the button from the HTML page to create an array of to-dos and display them on the webpage

// get list from local storage
const todos = JSON.parse(localStorage.getItem('todo-list')) || []

// create consts
const todoList = document.getElementById('todo-list')
const input = document.getElementById('new-todo')
const addButton = document.getElementById('add-todo')

// create/add list items
const renderTodos = () => {
    // clear li's before we recreate them
    todoList.innerHTML = ''
    // loop through list of items and create li elements
    todos.forEach(todo => {
        const li = document.createElement('li')
        li.textContent = todo.text
        li.className = 'todo'
        todoList.append(li)
    })
}

// button event listener
addButton.addEventListener('click', () => {
    if (input.value) {
        todos.push({ text: input.value, completed: false });
        localStorage.setItem('todo-list', JSON.stringify(todos));
        input.value = '';
        renderTodos();
    }
});
renderTodos()

Goal is for the user to type and submit a todo, and it will show up on the webpage. The page will display all the HTML elements, but the javascript doesn’t add elements. Or at least the javascript doesn’t display the elements that were put in local storage.

Seems like this code should work, I must be missing something.

Tags:

2

Answers


  1. 0

    The issue is in your HTML and JavaScript selector mismatch. In your HTML, you have <ul class="todo-list">, but in your JavaScript, you’re trying to select it with document.getElementById('todo-list'). Since you’re using a class selector in HTML but trying to find it by ID in JavaScript, the element isn’t being found. Here’s how to fix it:

    index.html

    <ul id="todo-list">

    Or modify your JavaScript to use a class selector:

    todolist.js

    const todoList = document.querySelector('.todo-list')

    From what I know,both approaches will work, just make sure the selectors match between HTML and JavaScript. After making this change, your code will work as expected, allowing users to add items to the list and persist them in localStorage.

    Login or Signup to reply.
  2. 0

    You used document.getElementById('todo-list') but have added <ul class="todo-list"> as a class.

    The selector for ul is .todo-list when you use class. To have getElementById work on this, you have to put this in id.

    Fixed ->

        <ul id="todo-list">
        <!-- List items will go here -->
    </ul>
    
    <input type="text" id="new-todo" placeholder="Add a new item">
    <button type="button" id="add-todo">Add To Do</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search