Como pegar valor de input com JavaScript

Neste artigo você vai aprender a como pegar valor de input com JavaScript, ou seja, o texto de um campo de formulários para utilizar no seu programa

Quer criar um projeto com JavaScript? Acesse o vídeo:

Fala programador(a), beleza? Bora aprender mias sobre formulários, inputs e também JavaScript!

Para resgatar o texto que fica digitado no input vamos precisa selecionar o elemento do input

Podemos utilizar diversos métodos para isso:

• getElementById
• getElementByClassName
• querySelector

E então vamos acessar a propriedade value do elemento, que é onde fica o texto que queremos usar de outra forma

Veja um exemplo prático:

<form action="">
  <input type="text" id="name" name="name">
  <input type="submit" value="Enviar">
</form>

Este é o nosso HTML base, um formulário simples com um único campo que é o que vamos resgatar o valor

Neste caso vamos utilizar a estratégia de querySelector e imprimir seu valor

Veja a parte de JavaScript necessária:

var input = document.querySelector("#name");

var texto = input.value;

console.log(texto);

Desta forma selecionamos primeiramente o elemento na primeira linha, utilizamos o método querySelector de document

Depois criamos outra variável para o valor, mas isso não é necessário

E por fim imprimimos o texto na tela, e pronto temos o valor/texto do input =)

Conclusão

Neste artigo aprendemos a como pegar valor de input com JavaScript

Primeiramente devemos selecionar o elemento alvo que queremos resgatar o texto

Depois é só acessar a propriedade value, que é onde o texto está inserido e pronto!

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!