Alterar valor de entrada em JavaScript
-
Altere o valor de entrada usando a propriedade
valueem JavaScript -
Altere o valor de entrada usando a função
setAttribute()em JavaScript
Este tutorial discutirá a alteração do valor de entrada usando a propriedade value ou a função setAttribute() em JavaScript.
Altere o valor de entrada usando a propriedade value em JavaScript
Usamos uma tag de entrada para obter a entrada de um usuário e podemos usar a propriedade value para alterar o valor de entrada. Em primeiro lugar, precisamos obter o elemento cujo valor queremos alterar usando seu id ou nome e, em seguida, podemos usar a propriedade value para definir seu valor para o valor desejado. Para obter um elemento em JavaScript, podemos usar a função getElementById() ou querySelector(). Por exemplo, vamos fazer um formulário com entrada e dar a ele um id para obter o elemento em JavaScript usando getElementById() e definir seu valor usando a propriedade value. Veja o código abaixo.
<!DOCTYPE html>
<html>
<head></head>
<body>
<form>
<input type="text" id= "123" name="ABC" value="Some Value">
</form>
</body>
<script type="text/javascript">
var Myelement = document.getElementById("123");
console.log(Myelement.value);
Myelement.value = "New value";
console.log(Myelement.value);
</script>
</html>
Produção:
Some Value
New value
No código acima, usamos a função document.getElementById() para obter o elemento usando seu id e, na próxima linha, imprimimos o valor de entrada atual usando a função console.log(). Depois disso, usamos a propriedade value para definir o valor de entrada para o nosso valor desejado e, depois disso, imprimimos o novo valor no console. Você também pode usar a função querySelector() para selecionar o elemento cujo valor de entrada você deseja alterar. Por exemplo, vamos repetir o exemplo acima usando a função querySelector(). Veja o código abaixo.
<!DOCTYPE html>
<html>
<head></head>
<body>
<form>
<input type="text" id= "123" name="ABC" value="Some Value">
</form>
</body>
<script type="text/javascript">
var Myelement = document.querySelector('input[name="ABC"]');
console.log(Myelement.value);
Myelement.value = "New value";
console.log(Myelement.value);
</script>
</html>
Produção:
Some Value
New value
No código acima, usamos a função querySelector() para obter o elemento.
Altere o valor de entrada usando a função setAttribute() em JavaScript
Também podemos usar a função setAttribute() em vez da propriedade valor para definir o valor de entrada. Também podemos usar a função forms() em vez da função getElementById() ou querySelector() para obter o elemento usando o nome do formulário e o nome de entrada. Por exemplo, vamos repetir o exemplo acima com as funções setAttribute() e froms(). Veja o código abaixo.
<!DOCTYPE html>
<html>
<head></head>
<body>
<form name="FormABC">
<input type="text" id= "123" name="ABC" value="Some Value">
</form>
</body>
<script type="text/javascript">
var Myelement = document.forms['FormABC']['ABC'];
console.log(Myelement.value);
Myelement.setAttribute('value','New value');
console.log(Myelement.value);
</script>
</html>
Produção:
Some Value
New value
Como você pode ver, a saída de todos esses métodos é a mesma, portanto, você pode usar qualquer método que desejar, dependendo de seus requisitos.
