Я учился делать todo list и у меня в конце непонятно что происходит:)
вот html(pug)
header
div.block
.block2
input( class='input' placeholder='text')
button.button click
.wraper
ul.todo
вот js
let button = document.querySelector('.button')
let text = document.querySelector('.input')
let todo = document.querySelector('.todo')
let todoList = [];
if(localStorage.getItem('todo')){
todoList = JSON.parse(localStorage.getItem('todo'))
displayMessages()
}
button.addEventListener('click',
() => {
let newTodo = {
todo: text.value,
checked: false,
important: false
}
todoList.push(newTodo)
// console.log(todoList)
displayMessages()
localStorage.setItem('todo', JSON.stringify(todoList))
})
function displayMessages(){
let displayMessage = ''
todoList.forEach(function (item,i){
displayMessage +=`
<li>
<input type="checkbox" id="item_${i}" ${item.checked ? 'checked' : ''}>
<label for="item_${i}">${item.todo}<label>
</li>
`;
todo.innerHTML = displayMessage
});
}
todo.addEventListener('change',function (event){
let idInput = event.target.getAttribute('id');
let forLabel = todo.querySelector('[for=' + idInput +']');
let valueLabel = forLabel.innerHTML
console.log('valueLabel',valueLabel)
todoList.forEach(function (item){
if(item.todo === valueLabel){
item.checked = !item.checked;
localStorage.setItem('todo', JSON.stringify(todoList))
}
})
})
и не пишите пожалуйста что у меня некоторые имена для let некорректные я сам это знаю))
Вот сама проблема. В видео выводиться
а у меня почему-то в конце появляеться label.
Вот как у меня.
И из за это-го у меня дальше проблемы помогите пожалуйста))Заранее спасибо
