MédioFase 5
Exercício Médio — Formulário com Manipulação do DOM
Cria um formulário HTML e usa JavaScript para capturar o valor digitado e mostrá-lo na página, sem recarregar.
FerramentasVS CodeNavegador
Objetivo: praticar seleção de elementos, eventos e alteração do conteúdo da página em tempo real.
Passos a realizar
- Cria uma pasta formulario-nomes dentro de fase5, com index.html e script.js.
- No HTML, cria um input de texto, um botão, e um elemento vazio (ex: um p com um id) onde o resultado vai aparecer.
- Liga o script.js no fim do body com uma tag script.
- No script.js, seleciona os três elementos com querySelector.
- Adiciona um addEventListener de "click" ao botão que lê o valor do input (propriedade .value) e o escreve dentro do elemento de resultado (propriedade .textContent).
- Depois de escrever o resultado, limpa o input (define .value como string vazia) para o próximo nome.
Fluxo de funcionamento
- 1Utilizador escreve no input
- 2Clica no botão
- 3JS lê input.value
- 4Atualiza o texto na página
Código de exemplo
script.js
const input = document.querySelector("#nome-input");
const botao = document.querySelector("#botao-mostrar");
const resultado = document.querySelector("#resultado");
botao.addEventListener("click", function () {
const nome = input.value;
resultado.textContent = "Olá, " + nome + "!";
input.value = "";
});Dicas
- Confirma sempre no console do navegador (F12) se o querySelector encontrou mesmo o elemento — se devolver null, o seletor está errado ou o script correu antes do HTML existir.
- Um script colocado no fim do body corre depois do HTML já estar todo carregado, o que evita o problema de "elemento não encontrado" logo à partida.
Erros comuns
- Usar .innerHTML em vez de .textContent sem necessidade — para texto simples, .textContent é mais seguro.
- Esquecer que .value do input é sempre uma string, mesmo que o utilizador escreva números.