Como obter o valor do campo de entrada de texto usando JavaScript?

O JavaScript pode interagir com diferentes páginas da web para fornecer servidor, bem como serviços do lado do cliente. O propósito de JavaScript é fornecer elementos interativos nas páginas da web para envolver os usuários. Esses elementos interativos incluem estilo dinâmico, inserindo o valor, obtendo valor de formulários, etc.

Neste post, uma implementação prática de como obter o valor do texto dos campos de entrada é executada usando JavaScript.

Existem diferentes maneiras de adquirir o valor do campo de entrada, utilizando JavaScript. Mantendo -os em vista, os resultados do post são:

• • Usando o getElementById em javascript
  • Usando getElementsbyclassName em javascript

Método 1: Usando o getElementById em javascript

Em JavaScript, o getElementById O método é utilizado para obter o valor da caixa de texto de entrada com um atributo de identificação. Este método é empregado para retornar uma saída por um valor especificado. Ele retorna o valor nulo se o elemento não estiver presente aqui. A maioria dos usuários o utiliza para ler e modificar elementos html. A sintaxe do getElementById é a seguinte:

Sintaxe

documento.getElementById ("inputId").valor;

Nesta sintaxe, o getElementById O método extrai o valor passando o mesmo atributo de identificação “inputId”.

Código

Um exemplo de obtenção do valor do campo de texto de entrada.

Aperte o botão

No código acima:

• • Primeiro, o campo de entrada é usado para receber a entrada do usuário.
  • Depois disso, o getInputValue () A função é usada para adquirir a propriedade Value usando getElementById.valor.
  • Um novo botão é criado que possui a função getInputValue () em seu evento OnClick.

Saída

Depois de executar o código, uma caixa de texto e um botão aparecerão. Quando você escreve alguma palavra na caixa de texto e o botão é pressionado, aparecerá uma caixa de alerta que contém a palavra/texto escrito na caixa de texto anteriormente. O pop-up de alerta seria como mostrado abaixo:

Método 2: Usando o getElementsbyclassName em JavaScript

Em JavaScript, outro método conhecido como getElementsbyclassName é usado para obter o valor do campo de entrada de texto. Ele retorna o conjunto de elementos especificados pelo nome da classe. O getElementsbyclassName () O método é chamado usando o elemento do documento. Ele pesquisa o documento inteiro e fornece a saída de todos os elementos filhos presentes no documento. A sintaxe para usar este método é fornecida abaixo:

documento.getElementsByClassName ("InputClass") [0].valor;

A sintaxe é descrita como:

• • inputclass: representa o nome da classe.
  • [0]: Representa que se nenhum elemento correspondente estiver presente aqui, retorne indefinido.

Código

Usando o método getElementsbyclassName e exibi -lo.

Obter valor

O código acima representa que inputclass é especificado como um nome de classe do campo de texto. Depois disso, o getInputValue () função é usada, em que getElementsbyclassName () é chamado usando o documento elemento especificando o nome da classe “inputclass““.

Saída

Na tela acima, o valor “Minhal”É colocado dentro do texto arquivado.

Depois de pressionar o Obter valor Botão, o valor é armazenado e exibido como uma mensagem de alerta na janela pop-up. Dessa forma, o getElementsbyclassName () O método pode ser usado para obter o valor do campo de entrada de texto usando JavaScript.

Conclusão

Em JavaScript, o getElementById () e getElementsbyclassName () Os métodos são utilizados para obter o valor do campo de entrada de texto. No getElementById () Método, o valor da caixa de texto de entrada é extraído com um atributo de identificação. Considerando que a getElementsbyclassName () O método retorna o conjunto de elementos especificados pelo nome da classe. Ambos os métodos são suportados por navegadores avançados, que incluem Chrome, Opera, Safari, etc. Você aprendeu a extrair o valor do campo de entrada de texto com JavaScript.