Como definir o valor de um campo de entrada em JavaScript?

As manipulações de DOM usando JavaScript permite que o programador altere os elementos ou mesmo os atributos dos elementos de uma página da Web HTML. Alterar o valor do campo de entrada não é diferente. Existem duas abordagens para alterar o valor de um campo de entrada usando JavaScript. Estes são:

• Atribuindo o atributo de valor de um elemento algum valor usando o operador de atribuição “=”
• Usando o SetAttribute () função.

Vamos simplesmente pular dentro da demonstração de ambos os métodos, mas antes disso, precisamos de um modelo HTML para trabalhar.

Configurando uma página da web html

No arquivo HTML, basta adicionar as seguintes linhas para criar um novo campo de entrada de texto com o ID "TextFoild1"

Quando executamos o programa, estamos indo para a seguinte saída em nosso navegador:

Podemos ver nosso campo de entrada na tela.

Método 1: Atribua o atributo de valor diretamente

Para isso, vamos primeiro adicionar as seguintes linhas em nosso arquivo HTML:

Alterar valor

Isso adicionará um novo botão abaixo do nosso campo de texto. E anexamos uma função no clique neste botão nomeado como ChangeValue ():

No arquivo de script, adicionaremos a seguinte funcionalidade para fazer com que este botão funcione:

função alteração de alteração ()
textfield = documento.getElementById ("textfield1");
campo de texto.value = "Método 1";

Estamos recebendo uma referência ao nosso campo de texto usando o documento.getElementById (). Depois disso, usamos o operador DOT para obter o atributo de valor e atribuí -lo diretamente um valor de string. Ao clicar neste botão, obtemos a seguinte saída:

Como você pode ver, fomos capazes de alterar o valor do campo de entrada usando o operador DOT e o atributo de valor.

Método 2: Usando a função setAttribute ()

Para isso, adicionaremos um novo botão logo abaixo do botão anterior usando as seguintes linhas no arquivo HTML:

Mudar por setAttribute ()

Como você pode ver, anexamos este botão com uma função nomeada como setAttributechange (). Ao carregar este HTML, obtemos a seguinte página da web em nosso navegador:

Então entramos dentro do arquivo de script e definimos isso setAttributechange () Alterar a função da seguinte forma:

function setAttributechange ()
textfield = documento.getElementById ("textfield1");
campo de texto.setattribute ("value", "método 2");

Na primeira linha, estamos obtendo uma referência ao campo de texto usando o documento.getElementById () função. Depois disso, estamos usando o DOT-Operator e a setAttribute () função para escolher o atributo “valor”E então dê um valor de string como“Método 2”. Ao clicar no botão, obtemos a seguinte saída:

Como você pode ver, conseguimos alterar o valor do campo de entrada usando a função setAttribute ().

Conclusão

Com a ajuda das manipulações de DOM, o JavaScript nos permite alterar facilmente o atributo de valor de um campo de entrada dentro de uma página da web html. Para isso, temos duas abordagens diferentes que nos levam ao mesmo resultado. Nós temos o elemento.função setAttribute () que nos permite escolher um atributo e dar algum valor de nossa escolha. Em segundo lugar, temos a opção de selecionar o atributo usando o “operador de pontos”E, em seguida, atribua esse atributo a qualquer valor usando o operador de atribuição“=.”