So im creating a simple to do list, when you type the todo and click submit, it adds an li to the ul. when you click on the text of the li it will put a linethrough the words. However when two or more lis are appended to the ul, only every other li will respect this line-through action. can someone point out why and solve this problem?
———————————The html—————————–
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel ='stylesheet' href = 'todo.css'>
</head>
<body>
<h1>To do list!</h1>
<form>
<input type ='text'>
<input type = 'submit' placeholder = 'Add to do'>
</form>
<ul>
</ul>
<script src = 'todo.js'></script>
</body>
</html>
———————————The javascript——————————-
const ul = document.querySelector('ul')
const submitTodo = document.querySelector('input[type="submit"]')
const addTodo = document.querySelector('input[type="text"]')
submitTodo.addEventListener('click', function(e){
e.preventDefault()
let newTodo = document.createElement('li')
newTodo.innerText = addTodo.value
let newTodoRemove = document.createElement('button')
newTodoRemove.innerText = 'Remove To-do'
ul.appendChild(newTodo)
newTodo.appendChild(newTodoRemove)
const allLis = document.querySelectorAll('li')
console.log(allLis)
for(let li of allLis){
li.addEventListener('click', function(e){
if(e.target.style.textDecoration == 'line-through'){
e.target.style.textDecoration = 'none'
}else{
e.target.style.textDecoration = 'line-through'
}
})
}
})