Este artigo irá demonstrar os métodos para obter e definir valores de texto de entrada em JavaScript.
Como obter e definir o valor do texto de entrada em JavaScript?
Para obter e definir o valor do texto de entrada em JavaScript, utilize:
- “ getElementById() ” método
- “ getElementByClassName() ” método
- “ querySelector() ” método
Percorra cada um dos métodos mencionados um por um!
Método 1: obter e definir o valor do texto de entrada em JavaScript usando o método document.getElementById()
O ' getElementById() ” acessa um elemento com o Id especificado. Este método pode ser aplicado para acessar os ids dos campos de entrada e botões para obter e definir o valor do texto.
Sintaxe
documento. getElementById ( elementos )
Aqui, ' elementos ” refere-se ao ID especificado de um elemento.
O exemplo abaixo explica o conceito discutido.
Exemplo
Em primeiro lugar, inclua dois campos de tipo de entrada e botões separados para obter e definir os valores de texto de entrada com o “ ao clicar ” eventos que acessarão as funções especificadas:
< botão ao clicar = 'getText()' > Obter valor botão >
< botão ao clicar = 'getAndSetText()' > Definir valor botão >
< tipo de entrada = 'texto' Eu iria = 'setTexto' nome = 'setTexto' ao clicar = 'this.value = '' ' />
Em seguida, obtenha o valor do campo de entrada com a ajuda do método document.getElementById():
documento. getElementById ( 'getTexto' ) . valor = 'Entre aqui' ;Agora, declare uma função chamada “ getAndSetText() ”. Aqui, busque o campo de entrada com o “ getText ” id e passe o valor de entrada para o próximo campo de entrada com “ setText ' Eu iria:
função getAndSetText ( ) {foi setText = documento. getElementById ( 'getTexto' ) . valor ;
documento. getElementById ( 'setText' ) . valor = setText ;
}
Da mesma forma, defina uma função chamada “ getText() ”. Depois disso, pegue o campo de entrada com “ getText ” id e passe o valor específico para a caixa de alerta para obter o valor do texto de entrada:
função getText ( ) {foi getText = documento. getElementById ( 'getTexto' ) . valor ;
alerta ( getText ) ;
}
Resultado
Método 2: obter e definir o valor do texto de entrada em JavaScript usando o método document.getElementByClassName()
O ' getElementByClassName() ” acessa um elemento com a ajuda do nome de classe especificado. Este método, da mesma forma, pode ser aplicado para acessar a classe do campo de entrada e botões para inserir e definir o valor do texto.
Sintaxe
documento. getElementsByClassName ( nome da classe )Na sintaxe acima, o “ nome da classe ” representa o nome da classe dos elementos.
Exemplo
Semelhante ao exemplo anterior, primeiro acessaremos o primeiro campo de entrada com o “ getText ' nome da classe. Em seguida, defina uma função chamada “ getAndSetText() ” e obtenha o campo de entrada especificado com base em seu nome de classe e defina o valor no próximo campo de entrada:
função getAndSetText ( )
{
foi setText = documento. getElementByClassName ( 'getTexto' ) . valor ;
documento. getElementById ( 'setText' ) . valor = setText ;
}
Da mesma forma, defina uma função chamada “ getText() ”, adicione o nome da classe do primeiro campo de entrada e passe o valor específico para a caixa de alerta para exibir o valor buscado:
função getText ( ) {foi getText = documento. getElementByClassName ( 'getTexto' ) . valor ;
alerta ( getText ) ;
}
Essa implementação produzirá a seguinte saída:
Método 3: Obtenha e defina o valor do texto de entrada em Javascript usando o método “document.querySelector()”
O ' document.querySelector() ” busca o primeiro e foi abaixo que corresponde ao seletor especificado, e o método addEventListener() pode adicionar um manipulador de eventos ao elemento selecionado. Esses métodos podem ser aplicados para obter o id do campo de entrada e botões e aplicar um manipulador de eventos a eles.
Sintaxe
documento. seletor de consulta ( Seletores CSS )Aqui, ' Seletores CSS ” referem-se a um ou mais seletores CSS.
Veja o exemplo a seguir.
Exemplo
Em primeiro lugar, inclua os tipos de entrada com seus valores de espaço reservado e botões para obter e definir os valores de texto de entrada:
< ID do botão = 'pegue' > PEGUE botão >
< tipo de entrada = 'texto' Eu iria = 'conjunto de entrada' marcador de posição = 'Definir valor' >
< ID do botão = 'definir' > DEFINIR botão >
Em seguida, busque os campos e botões de entrada adicionados usando o “ document.querySelector() ” método:
deixe botãoObter = documento. seletor de consulta ( '#pegue' ) ;deixe o botão Definir = documento. seletor de consulta ( '#definir' ) ;
deixe obterInput = documento. seletor de consulta ( '#input-get' ) ;
deixe definirEntrada = documento. seletor de consulta ( '#conjunto de entrada' ) ;
deixe resultado = documento. seletor de consulta ( '#resultado' ) ;
Em seguida, inclua um manipulador de eventos chamado “ clique ” para que ambos os botões obtenham e definam os valores, respectivamente:
botãoObter. addEventListener ( 'clique' , ( ) => {resultado. Texto interno = getInput. valor ;
} ) ;
ButtonSet. addEventListener ( 'clique' , ( ) => {
getInput. valor = setInput. valor ;
} ) ;
Resultado
Discutimos os métodos mais simples para obter e definir o valor do texto de entrada em JavaScript.
Conclusão
Para obter e definir o valor do texto de entrada em JavaScript, utilize o “ document.getElementById() ” ou o método
“ document.getElementByClassName() ” para acessar o campo de entrada e botões especificados com base em seus ids ou nome de classe e, em seguida, definir seus valores. Além disso, o “ document.querySelector() ” também pode ser utilizado para obter e definir valores de texto de entrada em JavaScript. Este blog explicou os métodos para obter e definir valores de texto de entrada em JavaScript.