Cambiar el valor de entrada en JavaScript
-
Cambiar el valor de entrada usando la propiedad
valoren JavaScript -
Cambiar el valor de entrada usando la función
setAttribute()en JavaScript
Este tutorial discutirá cómo cambiar el valor de entrada usando la propiedad value o la función setAttribute() en JavaScript.
Cambiar el valor de entrada usando la propiedad valor en JavaScript
Usamos una etiqueta de entrada para obtener la entrada de un usuario, y podemos usar la propiedad de valor para cambiar el valor de entrada. En primer lugar, necesitamos obtener el elemento cuyo valor queremos cambiar usando su id o nombre, y luego podemos usar la propiedad value para establecer su valor en nuestro valor deseado. Para obtener un elemento en JavaScript, podemos usar la función getElementById() o querySelector(). Por ejemplo, hagamos un formulario con entrada y le asignemos un id para obtener el elemento en JavaScript usando getElementById() y establezcamos su valor usando la propiedad value. Vea el código a continuación.
<!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>
Producción :
Some Value
New value
En el código anterior, usamos la función document.getElementById() para obtener el elemento usando su id, y en la siguiente línea, imprimimos el valor de entrada actual usando la función console.log(). Después de eso, usamos la propiedad value para establecer el valor de entrada en nuestro valor deseado, y después de eso, imprimimos el nuevo valor en la consola. También puede utilizar la función querySelector() para seleccionar el elemento cuyo valor de entrada desea cambiar. Por ejemplo, repitamos el ejemplo anterior usando la función querySelector(). Vea el código a continuación.
<!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>
Producción :
Some Value
New value
En el código anterior, usamos la función querySelector() para obtener el elemento.
Cambiar el valor de entrada usando la función setAttribute() en JavaScript
También podemos usar la función setAttribute() en lugar de la propiedad value para establecer el valor de entrada. También podemos usar la función forms() en lugar de la función getElementById() o querySelector() para obtener el elemento usando el nombre del formulario y el nombre de entrada. Por ejemplo, repitamos el ejemplo anterior con la función setAttribute() y froms(). Vea el código a continuación.
<!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>
Producción :
Some Value
New value
Como puede ver, el resultado de todos estos métodos es el mismo, por lo que puede utilizar el método que desee según sus requisitos.
