Como obter o valor de entrada em javascript

O JavaScript oferece uma variedade de funcionalidades para criar interfaces interativas. Pode -se recuperar o valor de qualquer elemento usando métodos JavaScript. O valor de entrada pode ser impresso em algum lugar na página da web ou pode ser obtido como uma mensagem de alerta. Tudo isso é possível com a ajuda do JavaScript. Aqui, vamos descrever o JavaScript Suporte para obter o valor de entrada de qualquer elemento. Os seguintes resultados de aprendizado são esperados:

• Como obter o valor de entrada em javascript
• Obtenha o valor de entrada usando o método getElementById ()
• Obtenha o valor de entrada usando o método getElementsByClassName ()
• Obter valor de entrada usando o método queryselector ()

Como obter o valor de entrada em javascript

JavaScript fornece duas propriedades para obter os valores de entrada empregando o getElementById, getElementsbyclassName, e QuerySelector métodos. Esses métodos extraem a string, bem como o valor numérico para exibir as informações do usuário. Todos os navegadores famosos suportam essas duas propriedades. O valor A propriedade retorna as informações do usuário. Além disso, a propriedade é útil para atribuir qualquer valor específico para exibição na janela do navegador.

A sintaxe desses métodos é declarada abaixo.

Sintaxe do getElementById

documento.getElementById ("textId").value = "text_message";

Sintaxe do getElementsByClassName

documento.getElementsbyclassName ("clname").valor ;

Sintaxe do QuerySelector

documento.QuerySelector ("ID1").valor

A descrição dos parâmetros acima é como abaixo:

• TextId: indica o id de um elemento.
• mensagem de texto: representa a mensagem a ser exibida.
• clname: Especifique o nome da classe.
• Id1: representa o ID ou classe de um elemento HTML.

Exemplo 1: Obtenha o valor de entrada usando o método getElementById ()

Outro exemplo é considerado para obter o valor de entrada em JavaScript.

Html

Um exemplo para obter o valor do campo de texto

Mensagem favorita:

Pressione o botão para exibir o valor do texto.

Botão de exibição

O código HTML recebe o valor de entrada “Bem -vindo ao JavaScript"Pressionando o"Botão de exibição”. O botão está anexado com o Display_fn () método.

JavaScript

function display_fn ()
var a = documento.getElementById ("mtxt").valor;
documento.getElementById ("Demo").inerhtml = a;

Um método Display_fn () é empregado para recuperar o valor do texto no arquivo html por getElementById.

Exemplo 2: Obtenha o valor de entrada usando o método getElementsByClassName ()

Um exemplo é considerado para obter o valor numérico do campo de entrada em JavaScript.

Arquivo html

Um exemplo para obter o valor numérico do campo

Obtenha valor numérico

Neste código, a descrição está abaixo:

• A classe INPCLS é usado para inserir o número numérico.
• Depois disso, um botão está anexado que está associado ao getinpval () método.
• No final, um arquivo JavaScript teste.JS está ligado atribuindo a fonte src variável.

JavaScript

função getInpval ()
deixe inpval = documento.getElementsbyclassName ("inpcls") [0].valor;
alerta (inpval);

No arquivo JavaScript:

• Um método getinpval () é usado para extrair o valor do Html arquivo.
• A extração é realizada por GetelementbyclassName ("inpcls") [0].valor.
• No final, uma mensagem de alerta é gerada pela passagem do inpval variável.

Saída

A saída mostra que o usuário primeiro entra qualquer número. Depois disso, uma caixa de alerta é gerada pressionando o “Obtenha valor numérico" botão.

Exemplo 3: Obtenha o valor de entrada usando o método querySelector ()

Outro exemplo é considerado para obter o valor usando o QuerySelector () método.

Código

Obtenha valor usando o seletor de consulta

Botão de exibição

Neste código, a descrição é a seguinte:

• Em primeiro lugar, a caixa de texto e a botão estão anexados com e tags respectivamente.
• O botão está associado ao getValueInput () método.
• Neste método, QuerySelector () é empregado para extrair o valor do caixa de texto e exibi -lo usando Val1.

Saída

A saída mostra a mensagem “JavaScript”Ao pressionar o botão no navegador.

Conclusão

O getElementById, getElementsbyclassName, e QuerySelector () Os métodos são utilizados para obter o valor de entrada no JavaScript. Os dois primeiros métodos recuperam os elementos usando o ID e o nome da classe. Enquanto o terceiro método pode obter os elementos usando um ID, bem como um nome de classe. Aqui, você aprendeu a usar todos esses três métodos para obter valores de entrada no JavaScript.