How can I make this editbutton works?

Question

I am currently doing a to do list for learning, but now im stuck in a simple step, when I put a prompt everything works fine but when a change it for a swal.fire input I can't make it work. Please I need some help with this, I search everywhere and I can't get the answer. I been trying to make for the past 3 days but I can't comprehend the problem.

const input = document.querySelector ("#inputText");
const list = document.querySelector ("#list");
const addBtn = document.querySelector ("#addTexto");

let listNum = 0;


// Funcion principal
const filtroList = (x) => {
    const valorMinimo = 3;
    if (x) {
        if (x.length > valorMinimo) {
            return x;
        } else {
            Swal.fire({
                icon: 'error',
                title: 'ERROR',
                text: 'Ingrese 3 o más caracteres!',
                position: 'top',
                timer: 2000,
                background: '#eaf6f6',
                width: '20%'
            })
        }
    }
};

//Llamar evento
addBtn.addEventListener ('click', () => {
    let inputText = filtroList(input.value);
    
    if (inputText) {
        list.innerHTML += `
                
                
                
                
                
                     ${inputText} 
                
                
                    
                    
                                  
                    
                `;
        input.value = "";
        listNum++;
    }
} );

//Funcion chk
const chkbx = (e) => {
    const checkbox = document.getElementById(`check${e}`);
    const nueva = document.getElementById(`text${e}`);
    const classExit = nueva.classList.contains("text-decoration-line-through");
    if (classExit == true) {
        nueva.classList.remove("text-decoration-line-through");
    } else {
        nueva.classList.add("text-decoration-line-through");
    }
};

//Funcion edit
const editarText = (e) => {
    const nuevoText = document.getElementById(`text${e}`);
    
    const newText = Swal.fire({
        title: 'Ingrese nuevo texto',
        input: 'text',
        inputPlaceholder: 'Nuevo Texto...'
    })

    // const newText = prompt("");
    if (filtroList(newText)) {
        nuevoText.innerHTML = newText;
    }
};


//Funciton borrar
const borrarText = (e) => {
    const current = document.getElementById(`text${e}`).innerHTML;
    
    if (borrarText) {
        const p = document.getElementById("list");
        const c = document.getElementById(`list${e}`);
        p.removeChild(c);
        Toastify({
            text: "ELIMINADO",
            duration: 3000,
            style: {
                background: "linear-gradient(to right, #F05F57, #360940)",
            },
            }).showToast();
    }
};


// DarkMode masomenos xD
const darkMode = document.querySelector (".checkbox");
const body = document.querySelector ("body");
const cont = document.querySelector (".bg-white");
const btn = document.querySelector (".btn-dark");
const toDo = document.querySelector (".border-dark");
const titlo = document.querySelector (".h1")

darkMode.onclick = () => {
    body.classList.toggle ('dark');
    titlo.classList.toggle ('h12');

    cont.classList.toggle ('bg-dark');
    cont.classList.toggle ('bg-white');

    btn.classList.toggle ('btn-danger');
    btn.classList.toggle ('btn-dark');

    toDo.classList.toggle ('border-dark');
    toDo.classList.toggle ('border-danger');
}

.checkbox {
    opacity: 0;
}

.label {
    background-color: #111;
    border-radius: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    left: 150px;
    top: -32px;
    justify-content: space-between;
    padding: 5px;
    position: relative;
    height: 26px;
    width: 50px;
    transform: scale(1.5);
}

.label .ball {
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    height: 22px;
    width: 22px;
    transform: translateX(0px);
    transition: transform 0.2s linear;
}

.checkbox:checked + .label .ball {
    transform: translateX(24px);
}


.fa-moon {
    color: #817a5e;
}

.fa-sun {
    color: #f39c12;
}

.darkMode * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    background-color: rgb(214, 230, 245);
}

#darkMode {
    background-color: aliceblue;
    position: relative;
    width: 80px;
    height: 40px;
    box-shadow: inset 4px 4px 6px #cecece,
                inset -4px -4px -6px white ;
    margin: 0px auto;
    margin-top: 0px;
    border-radius: 25px;
    cursor: pointer;
}

.toggle {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    transform: scale(.7);
    background-color: blueviolet;
    border-radius: 25px;
    box-shadow: 3px 3px 8px crimson;
}

.h12{
    color: white;
}

.div-dm{
    background-color: rgb(37, 37, 51);
    }

.row-dk {
    background-color: black;
}
* {
    box-sizing: border-box;
}
body.dark {
    background: #292C35;
}

.hr {
    background-color: rgb(124, 124, 124);
}





    
    
    
    
    
    
    
    Lista/Todo List



    
    
        
            Lista/Todo List

How can I make this editbutton works?

0 Answers