Tengo un problema con este código javascript, que no se exactamente donde tenga mi error (creo que es en function clearCompleted
)
Lo que quiero lograr es que los botones en este código HTML
const lista = document.querySelector('#lista')
const elemento = document.querySelector('#elemento')
const input = document.querySelector('#input')
const botonEnter = document.querySelector('#boton-enter')
const check = 'fa-check-circle'
const uncheck = 'fa-circle'
const lineThrough = 'line-through'
const clearBtn = document.getElementById("clear");
const saveBtn = document.getElementById("save");
const emptyBtn = document.getElementById("empty");
let LIST
let id // para que inicie en 0 cada tarea tendra un id diferente
// funcion de agregar tarea
function agregarTarea( tarea,id,realizado,eliminado) {
if(eliminado) {return} // si existe eliminado es true si no es false
const REALIZADO = realizado ? check : uncheck // si realizado es verdadero check si no uncheck
const LINE = realizado ? lineThrough : ''
const elemento = `
<li id="elemento">
<i class="fa ${REALIZADO} co" data="realizado" id="${id}"></i>
<p class="text ${LINE}">${tarea}</p>
<i class="fa fa-trash de" data="eliminado" id="${id}"></i>
</li>
`
lista.insertAdjacentHTML("beforeend",elemento)
}
// funcion de Tarea Realizada
function tareaRealizada(element) {
element.classList.toggle(check)
element.classList.toggle(uncheck)
element.parentNode.querySelector('.text').classList.toggle(lineThrough)
LIST[element.id].realizado = LIST[element.id].realizado ?false :true //Si
// console.log(LIST)
// console.log(LIST[element.id])
// console.log(LIST[element.id].realizado)
}
function tareaEliminada(element){
// console.log(element.parentNode)
// console.log(element.parentNode.parentNode)
element.parentNode.parentNode.removeChild(element.parentNode)
LIST[element.id].eliminado = true
console.log(LIST)
}
// crear un evento para escuchar el enter y para habilitar el boton
botonEnter.addEventListener('click', ()=> {
const tarea = input.value
if(tarea){
agregarTarea(tarea,id,false,false)
LIST.push({
nombre : tarea,
id : id,
realizado : false,
eliminado : false
})
localStorage.setItem('TODO',JSON.stringify(LIST))
id++
input.value = ''
}
})
document.addEventListener('keyup', function (event) {
if (event.key=='Enter'){
const tarea = input.value
if(tarea) {
agregarTarea(tarea,id,false,false)
LIST.push({
nombre : tarea,
id : id,
realizado : false,
eliminado : false
})
localStorage.setItem('TODO',JSON.stringify(LIST))
input.value = ''
id++
console.log(LIST)
}
}
})
lista.addEventListener('click',function(event){
const element = event.target
const elementData = element.attributes.data.value
console.log(elementData)
if(elementData == 'realizado') {
tareaRealizada(element)
}
else if(elementData == 'eliminado') {
tareaEliminada(element)
console.log("elimnado")
}
localStorage.setItem('TODO',JSON.stringify(LIST))
})
let data = localStorage.getItem('TODO')
if(data){
LIST = JSON.parse(data)
console.log(LIST)
id = LIST.length
cargarLista(LIST)
}else {
LIST = []
id = 0
}
function cargarLista(array) {
array.forEach(function(item){
agregarTarea(item.nombre,item.id,item.realizado,item.eliminado)
})
}
//Seccion para reiniciar la lista
function toggleToDoItemState(event) {
if (event.target.tagName === "LI") {
event.target.classList.toggle("done");
}
}
function clearCompleted(){
let dones = document.getElementsByClassName('done')
for(let i = 0; i < dones.length;i++){
dones[i].style.display='none'
}
}
clearBtn.addEventListener("click", clearCompleted);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Easy List - Crea tu lista de compras</title>
</head>
<body>
<!-Este es el container de todo weon->
<div class="container">
<div class="profile">
<h1>Easy List Shop</h1>
</div>
<div class="add-product">
<input type="text" id="input" placeholder="Agrega un producto, ejem: papas">
<i id="boton-enter" class="fa fa-plus-circle"></i>
</div>
<div class="section-product">
<h3>Productos por comprar </h3>
<ul id="lista">
</ul>
</div>
<div class="button-bottom" id="button_wrapper">
<button id="save">Save list</button>
<button id="clear">Clear completed</button>
<button id="empty">Empty list</button>
</div>
</div>
</body>
</html>
Pero no logro hacer que funcionen.
Alguien que me pueda ayudar a explicar como arreglar el problema, ya busque videos en YT pero no encuentro nada.
done
, por lo que no encuentra elementos a borrar