1
resposta

[Dúvida] [Dúvida] Erro na function no HTML

Já tentei desenvolver meu projeto de várias formas, mas sempre esbarro no mesmo problema. No console aparece isso:

Uncaught ReferenceError: confirmar is not defined
    at HTMLButtonElement.onclick (index.html:9:35)

HTML

<html>
<body>
<form id="meuForm">
    <label for="campoNome">Nome:</label>
    <input type="text" id="campoNome" name="nome">
    
    <label for="campoIdade">Idade:</label>
    <input type="text" id="campoIdade" name="idade">
    <button onclick="capturarValores()" type="button">Capturar Valores</button>
</form>
  
  <div id="mostraNome"><span>Seu nome e idade irão aparecer aqui.</span></div>
  <div id="texto"><span>Será que você precisa se vacinar?</span></div>
  
<script src="script.js"></script>
</body>
</html>

JS

function capturarValores() {
    const nome = document.getElementById('campoNome').value;
    const idade = document.getElementById('campoIdade').value;

    document.getElementById('mostraNome').textContent = `Nome: ${nome}, Idade: ${idade}`;
        console.log(`Nome: ${nome}, Idade: ${idade}`);
    if (idade < 18 || idade > 65)
        texto.textContent = "Você precisa se vacinar!";
    else
        texto.textContent = "Você não precisa se vacinar, por enquanto.";
}

O que estou fazendo errado?

1 resposta

Oi, Juan! Como vai?

O erro indica que confirmar não foi definido no seu código, mas no seu HTML você está chamando capturarValores(), não confirmar(). Isso significa que provavelmente em outra versão do seu código (ou em alguma linha não mostrada) você chamou uma função inexistente.

Além disso, no seu JS, a variável texto não foi declarada antes de usá-la. Quando você quer alterar o conteúdo da div com id "texto", precisa buscá-la com document.getElementById.

Veja este exemplo:


function capturarValores() {
    const nome = document.getElementById('campoNome').value;
    const idade = document.getElementById('campoIdade').value;
    const texto = document.getElementById('texto'); // adicionando a captura do elemento

    document.getElementById('mostraNome').textContent = `Nome: ${nome}, Idade: ${idade}`;
    console.log(`Nome: ${nome}, Idade: ${idade}`);

    if (idade < 18 || idade > 65) {
        texto.textContent = "Você precisa se vacinar!";
    } else {
        texto.textContent = "Você não precisa se vacinar, por enquanto.";
    }
}

Versão sem acentuação:


function capturarValores() {
    const nome = document.getElementById('campoNome').value;
    const idade = document.getElementById('campoIdade').value;
    const texto = document.getElementById('texto');

    document.getElementById('mostraNome').textContent = `Nome: ${nome}, Idade: ${idade}`;
    console.log(`Nome: ${nome}, Idade: ${idade}`);

    if (idade < 18 || idade > 65) {
        texto.textContent = "Voce precisa se vacinar!";
    } else {
        texto.textContent = "Voce nao precisa se vacinar, por enquanto.";
    }
}

Esse código captura corretamente o elemento #texto antes de usá-lo e evita o erro de referência. Verifique também se no seu HTML não existe mais nenhum botão chamando confirmar() sem querer.

Espero ter ajudado e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓.