Como alterar valor de input com JavaScript

Neste artigo você vai aprender a como alterar valor de input com JavaScript, da maneira mais simples possível!

Fala programador(a), beleza? Bora aprender mais sobre inputs e JavaScript!

Para alterar o valor de um input, ou seja, um campo de um formulário HTML

Primeiramente precisamos selecionar o input, com algum dos métodos disponíveis

Como: querySelector, getElementById e etc

Depois disso precisamos apenas alterar o atributo value, isso faz com que o valor seja alterado

Veja um exemplo prático do que foi explicado:

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

const myInput = document.querySelector("#some-input")

myInput.value = "Changed input value!"

Na primeira linha há a seleção do input, que tem um id de #some-input

E depois na última a mudança de valor, a partir da atribuição de algo na propriedade value

Note que necessitamos acessar o document para executar métodos de DOM

Viu como é fácil mudar o valor de um input? 🙂

Conclusão

Neste artigo você aprendeu a como alterar valor de input com JavaScript

Precisamos apenas alterar a propriedade value do elemento de DOM

Mas antes é necessário selecionar o elemento, a partir de um método de seleção

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!

Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias

O link acima contém um cupom de desconto para os cursos!

Resposta rápida:

Seleciona o input com um método de seleção e joga o novo texto na propriedade value

const myInput = document.querySelector("#some-input")
myInput.value = "Novo valor"

É isso, sem biblioteca nenhuma 🙂

Se quiser entender o porquê de cada linha, segue lendo que eu explico tudo abaixo

E com getElementById?

Funciona igualzinho, o que muda é só a forma de achar o elemento

const myInput = document.getElementById("some-input")
myInput.value = "Changed input value!"

Repara numa diferença que pega MUITA gente: no getElementById tu passa o id puro, sem o #

Já no querySelector o seletor é igual ao do CSS, então o # tem que estar lá

Tome cuidado com isso, é o tropeço mais comum de quem tá começando

Como pegar o valor de um input:

A mesma propriedade que muda o valor também serve pra ler o que a pessoa digitou

const myInput = document.querySelector("#some-input")
console.log(myInput.value)

Ou seja: value do lado direito da igualdade lê, value do lado esquerdo escreve

Simples assim =)

O valor não mudou? Se liga nisso:

Antes de achar que o JavaScript quebrou, confere estes dois pontos

O seletor tá batendo com o elemento? Se o id do HTML for outro, a seleção não acha nada e a linha de baixo quebra

O script tá rodando depois do input existir na página? Se o código roda antes do elemento ser criado, não tem o que selecionar

Um console.log(myInput) antes de mexer no value já te responde as duas coisas de uma vez

É o clássico que faz a galera perder um tempão olhando pro código certo haha

Perguntas rápidas:

Preciso de jQuery ou alguma biblioteca pra isso?

Não precisa, isso aqui é DOM puro, o próprio navegador já entrega tudo pronto

Dá pra limpar o campo?

Dá, é só atribuir uma string vazia no value

myInput.value = ""

Funciona com qualquer método de seleção?

Funciona, o que importa é ter o elemento em mãos

Depois que tu tem o elemento, o value é sempre o mesmo caminho