javascriptarrayslocal-storagereload

Why the my todo list is visible localStorage and not on the screen?


I made a todo list in javascript. Everything works. When a todo is added, it is visible in the local storage, and when it is deleted, it is deleted from Local Storage. But i have to refresh the page to see this result on screen. I have to use location.reload() for that. Why can't i see directly? Where is the problem ? How can I see the result on the screen without using location.reload ?

const form = document.querySelector('form');
const input = document.querySelector('.inp')

const addToDo = (e) => {

    e.preventDefault()
    const inputValue = input.value;

    let tasks;

    if (localStorage.getItem('tasks') === null) {
        tasks = []
    }
    else {
        tasks = JSON.parse(localStorage.getItem('tasks'))
    }

    tasks.push(inputValue)
    console.log(inputValue);


    localStorage.setItem('tasks', JSON.stringify(tasks))

    input.value = ''
     // location.reload()
}

form.addEventListener('submit', addToDo)

const tasks = JSON.parse(localStorage.getItem('tasks'))


tasks.map((task, index) => {
    return (
        document.querySelector('ol').innerHTML += `
    <li>${task}  <button onclick='del(${index})' class='btn' >X</button></li>
    `
    )
})


const del = (e) => {

    const btns = document.querySelectorAll('.btn')
    let filteredArray = tasks.filter((data, index) => {
        return index !== e;
    })
    localStorage.setItem('tasks', JSON.stringify(filteredArray))
    // location.reload()
}
<!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">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <form action="">
        <input type="text" class="inp">
        <button>Add todo</button>
    </form>
    <ol>
        
    </ol>
    <script src="script.js"></script>
</body>

</html>


Solution

  • The problem with your code is that you update the list only once during loading the browser's window. A possible solution would be to create a function with updating innerHtml and call this function in three places: per page load (as in your example), after adding new task, and after deleting a task.

    const form = document.querySelector('form');
    const input = document.querySelector('.inp')
    
    const addToDo = (e) => {
    
      e.preventDefault()
      const inputValue = input.value;
    
      let tasks;
    
      if (localStorage.getItem('tasks') === null) {
        tasks = []
      } else {
        tasks = JSON.parse(localStorage.getItem('tasks'))
      }
    
      tasks.push(inputValue)
      console.log(inputValue);
    
    
      localStorage.setItem('tasks', JSON.stringify(tasks))
    
      input.value = ''
      // location.reload()
      updateTaskList()
    }
    
    form.addEventListener('submit', addToDo)
    
    function updateTaskList() {
      const tasks = JSON.parse(localStorage.getItem('tasks'))
      document.querySelector('ol').innerHTML = ''
    
      tasks.map((task, index) => {
        return document.querySelector('ol').innerHTML += `
        <li>${task}  <button onclick='del(${index})' class='btn' >X</button></li>
        `
      })
    }
    
    updateTaskList()
    
    
    
    const del = (e) => {
    
      const tasks = JSON.parse(localStorage.getItem('tasks'))
    
      const btns = document.querySelectorAll('.btn')
      let filteredArray = tasks.filter((data, index) => {
        return index !== e;
      })
      localStorage.setItem('tasks', JSON.stringify(filteredArray))
      // location.reload()
      updateTaskList()
    }