0

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.

4
  • Por favor, aclara tu problema específico o proporciona detalles adicionales para resaltar exactamente lo que necesitas. Tal como está escrito, es difícil saber exactamente qué estás preguntando.
    – Comunidad Bot
    Commented el 29 jun. 2023 a las 6:47
  • creo que se desacomodo mi pregunta la editare o simplemente haré otra publicacion (eliminando esta) Commented el 29 jun. 2023 a las 7:26
  • He editado juntando el JS con el HTML. No termina de funcionar por limitaciones de StackOverflow (no se puede acceder a localStorage), pero puedes editar de nuevo para eliminar esa parte que no parece jugar un papel relevante en tu problema. Te aconsejo crear un ejemplo mínimo verificable. Este ejemplo sólo falla en que no es mínimo, así que yo editaría antes de crear un nueva pregunta desde cero Commented el 29 jun. 2023 a las 8:38
  • Creo que el problema es que cuando marcas una tarea como realizada no le añades al elemento la clase done, por lo que no encuentra elementos a borrar Commented el 29 jun. 2023 a las 8:49

1 respuesta 1

0

La función toggleToDoItemState() nunca es llamada, eso hace que no tengas ningún elemento con el ClassName = done, y que la variable dones de la función clearCompleted() su valor sea 0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.