Como mudar valor de input com JavaScript

Neste artigo você vai aprender a como mudar valor de input com JavaScript, vem conferir como é simples fazer isso!

Fala programador(a), beleza? Bora aprender mais sobre manipulação de DOM com JavaScript!

Introdução

Os elementos de input são fundamentais para a interação do usuário com aplicações web, permitindo que os usuários insiram dados e informações.

Neste artigo, vamos explorar como mudar valor de input com JavaScript, permitindo que você manipule dinamicamente os valores de input em sua aplicação.

Selecionando o elemento input

Antes de podermos alterar o valor do input com JavaScript, primeiro precisamos selecionar o elemento input em questão.

Para fazer isso, usamos os métodos getElementById, getElementsByClassName, getElementsByTagName, ou querySelector para selecionar o elemento com base em seu ID, classe, tag ou qualquer outro seletor CSS.

Exemplo:

<input type="text" id="meuInput" value="Valor inicial">

const inputElement = document.getElementById('meuInput');

Mudando o valor do elemento input

Agora que selecionamos o elemento input, podemos mudar seu valor usando a propriedade value.

Basta atribuir um novo valor a essa propriedade, e o valor do elemento input será atualizado automaticamente.

Exemplo:

inputElement.value = 'Novo valor';

Exemplos práticos

Vamos dar uma olhada em alguns exemplos práticos de como alterar o valor do input com JavaScript em diferentes cenários.

Exemplo 1: Mudar o valor de input ao clicar em um botão

<input type="text" id="meuInput" value="Valor inicial">
<button id="botaoMudarValor">Mudar valor</button>

<script>
  const botaoMudarValor = document.getElementById('botaoMudarValor');
  botaoMudarValor.addEventListener('click', mudarValor);

  function mudarValor() {
    const inputElement = document.getElementById('meuInput');
    inputElement.value = 'Novo valor';
  }
</script>

Exemplo 2: Mudar o valor de input com base em outro input

<input type="text" id="input1" value="Valor inicial">
<input type="text" id="input2">

<script>
  const input1 = document.getElementById('input1');
  const input2 = document.getElementById('input2');

  input1.addEventListener('input', copiarValor);

  function copiarValor() {
    input2.value = input1.value;
  }
</script>

Quer aprender mais sobre React? Confira o vídeo abaixo:

Conclusão

Ao longo deste artigo, exploramos como alterar o valor do input com JavaScript, uma habilidade fundamental para a criação de aplicações web interativas e dinâmicas.

Agora você deve ser capaz de selecionar e manipular elementos de input usando JavaScript, permitindo uma melhor interação do usuário e uma experiência mais rica.

Está buscando em evoluir como Programador? Confira o nossos cursos clicando aqui.

Nosso principal objetivo é tornar você um dev profissional que é capaz de resolver problemas de alta dificuldade e criar projetos complexos, através de uma metodologia planejada nos mínimos detalhes, após formar muitos outros desenvolvedores.

Cursos com vários projetos, exercícios, material apoio, comunidade de alunos e muito mais!

Como limpar o valor de um input:

Limpar é o mesmo movimento de mudar, só que você joga uma string vazia lá dentro

Bem simples:

inputElement.value = ”

Pronto, o campo fica em branco na hora

Isso é MUITO útil depois que o usuário envia um formulário e você quer deixar tudo zerado pro próximo preenchimento

Como pegar o valor de um input:

Se pra mudar você atribui um valor na propriedade value, pra LER é o caminho inverso

Você só acessa a mesma propriedade sem atribuir nada:

const valorAtual = inputElement.value console.log(valorAtual)

Muita gente confunde, mas é a mesma propriedade fazendo os dois trabalhos: do lado esquerdo do igual ela escreve, do lado direito ela lê

Bora ver na prática? Abre o console e testa =)

value ou setAttribute? Cuidado com essa pegadinha:

Muita gente tenta mudar o campo com setAttribute(‘value’, ‘algo’) e acha que é a mesma coisa

Mas não é bem assim

O setAttribute mexe no atributo do HTML (o valor inicial), enquanto a propriedade value mexe no valor ATUAL que está na tela

Já me ferrei uma vez por causa disso: o campo não atualizava e eu não entendia o porquê

Regra prática: pra trocar o que o usuário está vendo agora, usa inputElement.value e segue o baile

Perguntas frequentes (FAQ):

Como mudar o valor de um input com JavaScript? Você seleciona o elemento (com getElementById ou querySelector) e atribui um novo valor na propriedade value, tipo inputElement.value = ‘Novo valor’

Como limpar um input com JavaScript? É só atribuir uma string vazia na propriedade value: inputElement.value = ”

Como pegar o valor digitado num input? Acessa a propriedade value sem atribuir nada: const valor = inputElement.value

Por que o valor do meu input não muda? Na maioria das vezes é porque a seleção do elemento falhou (ID errado) ou porque você usou setAttribute em vez da propriedade value; confere esses dois pontos primeiro