Olá!O código está funcionando como devia. Entretanto, quando é falado um novo número, ele aparece logo abaixo do dito anteriormente.
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