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!