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()
}