Como mudar o valor de input com JavaScript

Neste artigo você vai aprender a como mudar o valor de input com JavaScript, vamos apenas utilizar uma propriedade dos elementos!

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

Para alterar o valor de um input com JavaScript vamos precisar primeiramente selecionar o elemento

Esta é a forma de indicarmos qual input é que vai mudar o valor com o nosso código

Temos alguns métodos de seleção disponíveis:

• querySelector;
• querySelectorAll;
• getElementById;
• getElementsByClassName;

Você precisar escolher o que vai de encontro com a sua necessidade, eu vou utilizar o querySelector

Por fim, basta atribuir um valor a propriedade value do elemento

E então teremos o input com valor modificado!

Veja um exemplo de código:

const input = document.querySelector("#my-input")

input.value = "Teste"

Primeiramente há a seleção do elemento, e o colocamos em uma variável

Por fim foi alterada a propriedade value, que faz com que o input já apareça com um valor pré-estabelecido

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

Conclusão

No artigo de hoje você viu como mudar o valor de input com JavaScript

Primeiramente selecionamos o elemento, utilizei o querySelctor para isso

E depois alteramos o valor da propriedade value, para o valor que desejamos que o input tenha

Deseja programar de forma profissional? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!

Como pegar o valor que já está no input:

Antes de mudar, às vezes tu só quer LER o que está lá dentro

É a mesma propriedade, só que do outro lado do sinal de igual

const input = document.querySelector("#my-input")

console.log(input.value)

Formação Recomendada

Formação Claude Code

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

• 118 aulas
• 4 projetos
• 9h 33min

Conhecer formação

Se o campo estiver vazio, tu recebe uma string vazia, e não null

Isso é útil pra validar antes de sobrescrever:

if (input.value === "") {
input.value = "Valor padrão"
}

Ou seja: value serve pra ler e pra escrever, beleza? 🙂

Como mudar o valor de vários inputs de uma vez:

Lá em cima eu citei o querySelectorAll, mas não mostrei ele em ação

A diferença é simples: o querySelector traz UM elemento, o querySelectorAll traz uma lista

E em lista tu precisa percorrer pra alterar cada um:

const inputs = document.querySelectorAll(".meu-campo")

inputs.forEach((input) => {
input.value = "Teste"
})

Tome cuidado com um detalhe: se tu tentar fazer inputs.value = "Teste" direto na lista, nada acontece e o console nem reclama

A lista não tem a propriedade value, quem tem é cada elemento dentro dela

O mesmo vale pro getElementsByClassName, que também devolve uma coleção

Como limpar o valor de um input:

Limpar é o mesmo movimento, só que com string vazia

const input = document.querySelector("#my-input")

input.value = ""

Muita gente tenta remover o atributo ou dar reload na página só pra zerar um campo

Não precisa, uma string vazia resolve

E se for um formulário inteiro, o próprio form tem o reset, que devolve os campos pro estado inicial:

document.querySelector("form").reset()

Repare que reset volta pro valor INICIAL do campo, não necessariamente pro vazio

value ou setAttribute("value")? Qual usar:

Essa é a dúvida que mais gera cabelo branco nesse assunto

Os dois parecem fazer a mesma coisa, e não fazem

O setAttribute mexe no ATRIBUTO do HTML, aquele valor inicial que está escrito na tag

A propriedade value mexe no valor ATUAL do campo, o que está na tela agora

const input = document.querySelector("#my-input")

input.setAttribute("value", "Teste") // mexe no atributo

input.value = "Teste" // mexe no valor atual

O efeito prático: depois que o usuário digita alguma coisa, o setAttribute pode não mudar mais o que aparece na tela

Se teu objetivo é o campo mostrar outro valor agora, usa value e segue o baile

Mudei o value e nada aconteceu no resto da página:

Se liga nisso, porque pega muita gente

Quando o usuário digita, o navegador avisa a página que algo mudou

Quando TU muda por código, esse aviso não sai sozinho

Resultado: aquele seu código que escuta o campo pra habilitar um botão, calcular um total ou validar um formulário simplesmente não roda

O valor está lá, visível, mas ninguém foi avisado

Então a pergunta certa não é "por que o value não mudou", é "quem deveria ter sido avisado e não foi"

Se o seu código depende desse aviso, você mesmo precisa disparar o evento correspondente depois de alterar o valor

E se for checkbox, radio ou select?

Aqui o value engana

No checkbox e no radio, o value é só o dado que o campo carrega, ele não diz se está marcado ou não

Quem responde isso é a propriedade checked, que é true ou false:

const aceite = document.querySelector("#aceite")

aceite.checked = true

Já no select, o value funciona como você espera, e ele bate com o value de uma das options

const select = document.querySelector("#estados")

select.value = "SP"

Se você atribuir um valor que não existe em nenhuma option, o select não seleciona nada

Detalhe importante: input de arquivo é outra história, o navegador não deixa você definir o arquivo por código, e isso é proposital, é segurança

Erro comum: não dá pra mudar o valor de null

Caso o console comece a reclamar que não é possível definir a propriedade value de null, não é o seu value que está errado

É a SELEÇÃO que voltou vazia

Duas causas quase sempre:

O seletor não bate com o elemento (esqueceu o # do id, esqueceu o . da classe, ou escreveu o nome diferente do HTML)

Ou o script rodou antes do elemento existir na página

Esse segundo é traiçoeiro: se o script está no head, ele executa antes do input nascer, e o querySelector não acha nada

A saída mais simples é colocar o script no final do body, depois do HTML

Antes de sair caçando erro no código, joga um console.log(input) e vê se veio o elemento ou se veio null

Já me ferrei uma vez por causa disso, e não foi só uma vez haha

Ainda vale aprender isso com a IA escrevendo código?

Esse artigo é de uma época em que a gente escrevia cada linha na mão

Hoje muita gente simplesmente pede pro assistente mexer no campo e segue a vida, o famoso vibe coding

E olha, funciona na maioria das vezes

O problema aparece quando NÃO funciona: o valor aparece na tela, o formulário envia vazio, o botão não habilita, e aí você precisa saber o que olhar

A IA acerta o código, mas quem sabe se o certo era value, checked ou disparar o evento é você

Esses fundamentos aqui são exatamente o que te faz ler o código gerado e apontar o erro em segundos em vez de ficar pedindo "tenta de novo" pro modelo

Ou seja: continua valendo, só que o uso mudou de escrever pra revisar

Como pegar o valor que já está no input:

Antes de mudar, às vezes tu só quer LER o que está lá dentro

É a mesma propriedade, só que do outro lado do sinal de igual

const input = document.querySelector("#my-input")

console.log(input.value)

Se o campo estiver vazio, tu recebe uma string vazia, e não null

Isso é útil pra validar antes de sobrescrever:

if (input.value === "") {
input.value = "Valor padrão"
}

Ou seja: value serve pra ler e pra escrever, beleza? 🙂

Como mudar o valor de vários inputs de uma vez:

Lá em cima eu citei o querySelectorAll, mas não mostrei ele em ação

A diferença é simples: o querySelector traz UM elemento, o querySelectorAll traz uma lista

E em lista tu precisa percorrer pra alterar cada um:

const inputs = document.querySelectorAll(".meu-campo")

inputs.forEach((input) => {
input.value = "Teste"
})

Tome cuidado com um detalhe: se tu tentar fazer inputs.value = "Teste" direto na lista, nada acontece e o console nem reclama

A lista não tem a propriedade value, quem tem é cada elemento dentro dela

O mesmo vale pro getElementsByClassName, que também devolve uma coleção

Como limpar o valor de um input:

Limpar é o mesmo movimento, só que com string vazia

const input = document.querySelector("#my-input")

input.value = ""

Muita gente tenta remover o atributo ou dar reload na página só pra zerar um campo

Não precisa, uma string vazia resolve

E se for um formulário inteiro, o próprio form tem o reset, que devolve os campos pro estado inicial:

document.querySelector("form").reset()

Repare que reset volta pro valor INICIAL do campo, não necessariamente pro vazio

value ou setAttribute("value")? Qual usar:

Essa é a dúvida que mais gera cabelo branco nesse assunto

Os dois parecem fazer a mesma coisa, e não fazem

O setAttribute mexe no ATRIBUTO do HTML, aquele valor inicial que está escrito na tag

A propriedade value mexe no valor ATUAL do campo, o que está na tela agora

const input = document.querySelector("#my-input")

input.setAttribute("value", "Teste") // mexe no atributo

input.value = "Teste" // mexe no valor atual

O efeito prático: depois que o usuário digita alguma coisa, o setAttribute pode não mudar mais o que aparece na tela

Se teu objetivo é o campo mostrar outro valor agora, usa value e segue o baile

Mudei o value e nada aconteceu no resto da página:

Se liga nisso, porque pega muita gente

Quando o usuário digita, o navegador avisa a página que algo mudou

Quando TU muda por código, esse aviso não sai sozinho

Resultado: aquele seu código que escuta o campo pra habilitar um botão, calcular um total ou validar um formulário simplesmente não roda

O valor está lá, visível, mas ninguém foi avisado

Então a pergunta certa não é "por que o value não mudou", é "quem deveria ter sido avisado e não foi"

Se o seu código depende desse aviso, você mesmo precisa disparar o evento correspondente depois de alterar o valor

E se for checkbox, radio ou select?

Aqui o value engana

No checkbox e no radio, o value é só o dado que o campo carrega, ele não diz se está marcado ou não

Quem responde isso é a propriedade checked, que é true ou false:

const aceite = document.querySelector("#aceite")

aceite.checked = true

Já no select, o value funciona como você espera, e ele bate com o value de uma das options

const select = document.querySelector("#estados")

select.value = "SP"

Se você atribuir um valor que não existe em nenhuma option, o select não seleciona nada

Detalhe importante: input de arquivo é outra história, o navegador não deixa você definir o arquivo por código, e isso é proposital, é segurança

Erro comum: não dá pra mudar o valor de null

Caso o console comece a reclamar que não é possível definir a propriedade value de null, não é o seu value que está errado

É a SELEÇÃO que voltou vazia

Duas causas quase sempre:

O seletor não bate com o elemento (esqueceu o # do id, esqueceu o . da classe, ou escreveu o nome diferente do HTML)

Ou o script rodou antes do elemento existir na página

Esse segundo é traiçoeiro: se o script está no head, ele executa antes do input nascer, e o querySelector não acha nada

A saída mais simples é colocar o script no final do body, depois do HTML

Antes de sair caçando erro no código, joga um console.log(input) e vê se veio o elemento ou se veio null

Já me ferrei uma vez por causa disso, e não foi só uma vez haha

Ainda vale aprender isso com a IA escrevendo código?

Esse artigo é de uma época em que a gente escrevia cada linha na mão

Hoje muita gente simplesmente pede pro assistente mexer no campo e segue a vida, o famoso vibe coding

E olha, funciona na maioria das vezes

O problema aparece quando NÃO funciona: o valor aparece na tela, o formulário envia vazio, o botão não habilita, e aí você precisa saber o que olhar

A IA acerta o código, mas quem sabe se o certo era value, checked ou disparar o evento é você

Esses fundamentos aqui são exatamente o que te faz ler o código gerado e apontar o erro em segundos em vez de ficar pedindo "tenta de novo" pro modelo

Ou seja: continua valendo, só que o uso mudou de escrever pra revisar