3

Estoy haciendo un to-do-list con html y js en el que hay tres botones que dicen "NORMAL", cuya función es mostrar todos los items, después esta el botón "DONE", que lo que hace es mostrar solo los ítems que están completados al apretar un checkbox, y por ultimo un boton "NOT-DONE" que lo que muestra son los items que no están terminados al no apretar el checkbox.

Lo que sucede es que al apretar cualquiera de los 3, desaparece el punto negro que aparece por defecto siempre en un list item de HTML y no se porque sucede eso. Aquí dejo mi código:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/style.css">
    
    <title>To Do List</title>
</head>
<body>
    <h1>To Do List App</h1>
    <div class="container">
        <div class="header">
            <div class="clear">
                <i class="refresh" aria-hidden="true"></i>
            </div>
            <div id="date"></div>
        </div>
        <div class="functionalities">
            <button id="order normal">NORMAL</button>
            <button id="done">DONE</button>
            <button id="not-done">NOT-DONE</button>
        </div>
        <div class="add-item">
            <input type="text" id="input" placeholder="Add Something to Do">
            <button type="submit" id="button" onclick="addToDo()">Click Me</button>
        <div class="content">
            <ul id="list">
            </ul>
        </div>
    </div>
    <script src="app.js/app.js"></script>
</body>
</html>

JS

// function add to do

const list= document.getElementById("list");
const input= document.getElementById("input");
const normalButton= document.getElementById("order normal");
const finishedTask= document.getElementById("done");
const unfinishedTask= document.getElementById("not-done");


let toDo=[];
let buttonToDo=[];
let editValue=[];
let valueItem= [];
let id;
let idButton;
let editId;



function addToDo(){
    
    //input part
    const itemValue= input.value;
    if(itemValue===""){
        var alerta= alert("Por Favor escribe algo en tu lista");
        return;
    }
    valueItem.push(itemValue);
    console.log(valueItem);

    //creating elements
    const itemNew= document.createElement("li");
    const deleteButton= document.createElement("button");
    const para = document.createElement("p");
    const editButton= document.createElement("button");
    const checkButton= document.createElement("input");
    //creating text
    const text= document.createTextNode(itemValue);
    para.appendChild(text);

    //check-buttton
    
    checkButton.classList.add("check");
    checkButton.setAttribute("type","checkbox");
    checkButton.value= "not-checked"
    
    //item
    itemNew.classList.add("item");
    itemNew.appendChild(checkButton);           
    itemNew.appendChild(para);
    list.appendChild(itemNew);
    
    

    //edit-button
    editButton.classList.add("edit");
    editButton.value="EDIT";
    let editName= document.createTextNode("EDIT");
    editButton.appendChild(editName);
    itemNew.appendChild(editButton);
    
    //delete-button
    deleteButton.classList.add("delete");
    deleteButton.value="REMOVE";
    let deleteName= document.createTextNode("REMOVE");
    deleteButton.appendChild(deleteName);
    itemNew.appendChild(deleteButton);
    
    //id
    toDo.push(itemNew);
    let id= toDo.indexOf(itemNew);
    console.log(id);

    //id delete-button
    buttonToDo.push(deleteButton);
    let idButton= buttonToDo.indexOf(deleteButton);

    //id edit-button
    editValue.push(editButton);
    let editId= editValue.indexOf(editButton);
    
    //checkbox button
    checkButton.addEventListener("click",()=>{

        if (checkButton.value==="not-checked") {
            checkButton.setAttribute("value","checked");
            para.setAttribute("style","color:#ACACAC; text-decoration:line-through");
            console.log(checkButton);
        } else {
            checkButton.setAttribute("value","not-checked");
            para.setAttribute("style","color:none; text-decoration:none");
            console.log(checkButton);
        }
            
        
        
    });

    //edit button
    editButton.addEventListener("click",()=>{
        if(editId===id){
            let editText= prompt("Inserte aqui el texto a cambiar ...");
            para.innerHTML=editText;
            }
        }
    );


    //delete button
    deleteButton.addEventListener("click",()=>{
            if(idButton===id){
            list.removeChild(itemNew);
            valueItem.splice(id,1);
            console.log(valueItem);
            
            }
        }
    );
    
    //normal button
    normalButton.addEventListener("click",()=>{
        itemNew.setAttribute("style","display:block");
    });

    
    //finished-task button
    finishedTask.addEventListener("click",()=>{
        if (checkButton.value==="checked") {
            itemNew.setAttribute("style","display:block");
            
        } else {
            itemNew.setAttribute("style","display:none");
        }
    });

    //unfinished-task button
    unfinishedTask.addEventListener("click",()=>{
        if (checkButton.value==="not-checked") {
            itemNew.setAttribute("style","display:block");
            
        } else {
            itemNew.setAttribute("style","display:none");
        }
    });

}

document.addEventListener("keyup",(event)=>{ if(event.keyCode===13){addToDo()}});

1 respuesta 1

3

En tu javascript todas las sentencias que tengan esta forma

itemNew.setAttribute("style","display:block");

Cámbialas por esto

itemNew.setAttribute("style","display:block, list-style: circle");

Lo que pasa es que pierden su estilo por defecto al utilizar este método de setAttribute().

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.