Solucionado
Galera, alguém pode me dar uma luz sobre o porque "tag, texto e innerHTML" estarem 'apagados'?
Já pedi auxilio para Luri mas não deu certo. Ela pede para seguir com incremento de algumas linhas de código e o professor não fez isso na aula e deu certo
Oi Antonio,
Pelo que entendi, você está com dificuldades em entender porque o código não está funcionando como esperado. 🤔
Para te ajudar melhor, poderia compartilhar os códigos HTML e JavaScript completos? 🧐
Assim, posso analisar o contexto completo e identificar o problema.
🎓 Para saber mais: Documentação do querySelector
📌 Nota: Otimize seus estudos com o guia "Como turbinar seus estudos utilizando o fórum" e insira o código usando a ferramenta do fórum. 
Oi Antonio
Não precisa se preocupar com isso, é por causa do tema que estás a usar no seu Vscode apenas isso.
Oi, Luis Dias. Claro, segue código completo
[app.js]
function exibirTextoNaTela(tag, texto) {
let campo = document.querySelector(tag);
campo.innerHTML = texto;
};
exibirTextoNaTela('h1', 'Jogo do número secreto');
exibirTextoNaTela('p', 'Escolha um número entre 1 e 10');
function verificarChute() {
console.log('O botão foi clicado!');
}
[index.html]
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.responsivevoice.org/responsivevoice.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@700&family=Inter:wght@400;700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>JS Game</title>
</head>
<body>
<div class="container">
<div class="container__conteudo">
<div class="container__informacoes">
<div class="container__texto">
<h1></h1>
<p class="texto__paragrafo"></p>
</div>
<input type="number" min="1" max="10" class="container__input">
<div class="chute container__botoes">
<button onclick="exibirTextoNaTela()" class="container__botao">Chutar</button>
<button onclick="" id="reiniciar" class="container__botao" disabled>Novo jogo</button>
</div>
</div>
<img src="./img/ia.png" alt="Uma pessoa olhando para a esquerda" class="container__imagem-pessoa" />
</div>
</div>
<script src="app.js" defer></script>
</body>
</html>
Enoque, não acredito que seja devido ao tema. Inclusive, neste tema, quando alguma variavel não fica declarada, ela fica "apagada" da forma que está. Quando funciona fica em tom de azul ciano. Mas obrigado pelo auxilio.
Oi Antonio,
Você está chamando a função sem passar os parâmetros necessários.
A função exibirTextoNaTela() espera dois argumentos: tag e texto.
No seu HTML, o botão "Chutar" está assim:
<button onclick="exibirTextoNaTela()" class="container__botao">Chutar</button>
Se você quiser usar o valor do input, você pode pegar o valor do input dentro da função verificarChute() e passar para a função exibirTextoNaTela().
function verificarChute() {
let chute = document.querySelector('input').value;
exibirTextoNaTela('p', `Seu chute foi: ${chute}`);
}
E no HTML, você chamaria a função verificarChute() no botão:
<button onclick="verificarChute()" class="container__botao">Chutar</button>
🎓 Para saber mais: Documentação do onclick
Espero que isso ajude a resolver seu problema! 🧐
Continue praticando e explorando o mundo da programação.
Acredito que faltou mesmo acrescentar a algo no meu argumento, não fui completo na resposta mais se já está resolvido está tudo bem se não. Se ainda não foi resolvido uma das sugestões é mesmo atribuir os parâmetros a uma variável, pois sempre que declaramos a função com parâmetros, os parâmetros ficam inicialmente apagados, mais assim que atribuimos os valores desses parâmetros a uma variável ficam claros.
Dessa forma eles ficam apagados function exibirTextoNaTela(tag, texto) { let campo = document.querySelector('h1'); campo.innerHTML = 'Mensagem' };
Dessa forma eles clareiam function exibirTextoNaTela(tag, texto) { let campo = document.querySelector(tag); campo.innerHTML = texto; };
Continuação de bons estudos!
Obrigado aos dois pela ajuda! Foi de grande auxilio. Entendendo um pouco mais, consegui corrigir o código. E agora faz sentido!
function exibirTextoNaTela(argumento1, argumento2) {
let campo = document.querySelector(argumento1);
campo.innerHTML = argumento2;
};
exibirTextoNaTela('h1', 'Jogo do número secreto');
exibirTextoNaTela('p', 'Escolha um número entre 1 e 10');
console.log(exibirTextoNaTela());
function verificarChute() {
console.log('O botão foi clicado!');
}
verificarChute();
Agora tudo funciona e posso prosseguir com a aula! Enoque, acredito ser o tema mesmo!