Olá!O código está funcionando como devia. Entretanto, quando é falado um novo número, ele aparece logo abaixo do dito anteriormente.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Olá!O código está funcionando como devia. Entretanto, quando é falado um novo número, ele aparece logo abaixo do dito anteriormente.
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();
})
}
}
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