Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Números não estão se substituindo

Olá!O código está funcionando como devia. Entretanto, quando é falado um novo número, ele aparece logo abaixo do dito anteriormente.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

3 respostas

Main Script:

// variável da Div onde serão inseridos os valores
let elementoChute = document.getElementById('chute');
// Parte do API de reconhecimento de voz
window.SpeechRecognition = window.SpeechRecognition || webkitSpeechRecognition;
const recognition = new SpeechRecognition();
recognition.lang = 'pt-Br', 'us-EN';
recognition.start();

recognition.addEventListener('result', aoFalar);
recognition.addEventListener('end', ()=>recognition.start());

function aoFalar (fala){
    let palpite = fala.results[0][0].transcript;
    escreveFala(palpite);
    validaChute(palpite);

}

function escreveFala (audio){
    elementoChute.innerHTML += `<div>Você disse: </div>
    <span id="box" class="num-inicial"> ${audio} </span>`
}

Reconhecimento de voz:

    // variável da Div onde serão inseridos os valores
    let elementoChute = document.getElementById('chute');
    // Parte do API de reconhecimento de voz
    window.SpeechRecognition = window.SpeechRecognition || webkitSpeechRecognition;
    const recognition = new SpeechRecognition();
    recognition.lang = 'pt-Br', 'us-EN';
    recognition.start();

    recognition.addEventListener('result', aoFalar);
    recognition.addEventListener('end', ()=>recognition.start());

    function aoFalar (fala){
        let palpite = fala.results[0][0].transcript;
        escreveFala(palpite);
        validaChute(palpite);

    }

    function escreveFala (audio){
        elementoChute.innerHTML += `<div>Você disse: </div>
        <span id="box" class="num-inicial"> ${audio} </span>`
    }

O script de Validação:

    function validaChute (chute){

        let numero =+ chute;

        if(numIsNan(numero)){
            elementoChute.innerHTML += `
               <div> O valor acima é inválido</div>
            `
        }
        numCorreto(numero);
        outOfScope(numero);
        dicaMaior (numero);
        dicaMenor(numero);

        return chute
    }

    function numIsNan (numero) {
        return Number.isNaN(numero)
    }

    function outOfScope (numero){
        if(numero>1000 || numero < 1){
            elementoChute.innerHTML += `<div>O número dito deve estar entre <span class="num-inicial"> ${menor}</span> e <span class="num-inicial">${maior}</span></div>`
        } 

        return
    }

    function dicaMenor (numero){
        if(numero>numAleatorio){
            elementoChute.innerHTML += '<div>O número secreto é menor <i class="fa-solid fa-arrow-down"></i></div>'
        }

        return 

    }
    function dicaMaior (numero){
        if (numero<numAleatorio){
            elementoChute.innerHTML += '<div>O número secreto é maior <i class="fa-solid fa-arrow-up"></i></div>'
        }

        return

    }
    function numCorreto (numero){
        if(numero === numAleatorio){
                document.body.innerHTML = `<h2>Acertou Miserável!!
                !<br> O número secreto era <span class="num-inicial"> ${numero}</span> </h2>
                <button id="botaoJogar">Jogue Novamente</button>`

                let botao = document.getElementById('botaoJogar');
                botao.addEventListener('click', ()=>{
                    location.reload();
                })   
            }
        }
solução!

Oi Matheus sera que eu entendi. Pelo código fornecido, parece que você está trabalhando em um programa de reconhecimento de voz para um jogo de adivinhação de números. No entanto, o problema mencionado é que quando um novo número é falado, ele aparece abaixo do número anterior.

Para resolver esse problema e exibir apenas o número mais recente falado, você pode atualizar a função escreveFala da seguinte maneira:

javascript Copy code function escreveFala(audio) { elementoChute.innerHTML = <div>Você disse: </div> <span id="box" class="num-inicial"> ${audio} </span>; } Ao invés de utilizar += para adicionar o novo número à div elementoChute.innerHTML, substituímos por =, o que irá substituir o conteúdo anterior pelo novo número falado. Dessa forma, apenas o número mais recente será exibido na tela.

Espero que essa alteração ajude a resolver o problema e exiba corretamente apenas o número falado mais recentemente!

Funcionou, meu amigo! Muito obrigado pela dica! ;D