Speech to Text works only one time after I add the first todo

Question

I have a problem with a code I was writing recently, I am trying to make a voice to text function, I got it to work but it only transcribes once, after I hit the add button the voice is no longer transcribed to text. I only need help with that part, so if anyone can help me with that speech to text part I'll be glad.

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

let listNum = 0;


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

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

// Speech to text
const vtt = document.getElementById ("inputText")
const click = document.getElementById ("click_to_record")

click.addEventListener('click', () => {
    const speech = true;
    window.SpeechRecognition = window.webkitSpeechRecognition;

    const recognition = new SpeechRecognition();
    recognition.interimResults = true;

    recognition.addEventListener('result', e => {
        const transcript = Array.from(e.results)
            .map(result => result[0])
            .map(result => result.transcript)
            .join('')

        vtt.innerHTML = transcript;
        console.log(transcript);
    });

    if (speech == true) {
        recognition.start();
    }
})


//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}`);
    
    (async () => {

        const { value: newText } = await Swal.fire({
            input: 'text',
            inputLabel: 'Nuevo Texto',
            inputPlaceholder: 'Ingrese Nuevo Texto...',
            showCancelButton: true,
            background: '#eaf6f6',
            width: '25%'
        })

        if (filtroList(newText)) {
            nuevoText.innerHTML = newText;
        }
    })()
};


//Funcion borrar - delete
const borrarText = (e) => {
    const current = document.getElementById(`text${e}`).innerHTML;

    if (borrarText) {
        listNum = 1
        localStorage.removeItem (`ID${listNum}`)
        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")

const darkModeLS = localStorage.getItem ('dark')


if (darkModeLS === 'true') {
    body.classList.add ('dark');
    titlo.classList.add ('h12');

    cont.classList.add ('bg-dark');
    cont.classList.remove ('bg-white');

    btn.classList.add ('btn-danger');
    btn.classList.remove ('btn-dark');

    toDo.classList.add ('border-danger');
    toDo.classList.remove ('border-dark');

    document.querySelector ('#chk').setAttribute('checked', true);
}

darkMode.onclick = () => {
    let blckMode = localStorage.getItem('dark')

    if (blckMode === "true") {

        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');
        localStorage.setItem('dark', false)
    }
    else {
        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');
        localStorage.setItem('dark', true)
    }
}

.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

Speech to Text works only one time after I add the first todo

0 Answers