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