Cambiar el valor de entrada en JavaScript

Para cambiar lo que contiene actualmente un campo de texto HTML, selecciona el elemento deseado y asigna una cadena a su propiedad value. Así se actualiza el valor actual que muestra el control. Esto es distinto de cambiar el atributo de contenido value, que representa el valor predeterminado del control.

Cambiar el valor actual del campo de entrada con la propiedad value

Por ejemplo, este marcado asigna un ID al campo de entrada y establece un valor inicial:

El código y las etiquetas o salidas visibles de esta sección se mantienen en inglés.

<input type="text" id="user-name" value="Some Value">

En una página del navegador, selecciona ese elemento con document.getElementById("user-name") y luego asigna el texto nuevo con input.value = "New value". La asignación cambia el valor actual; no modifica el atributo HTML original. La misma propiedad se usa cuando una persona escribe en el campo.

Este ejemplo autónomo de JavaScript muestra la asignación. Usa un objeto pequeño para que la operación con la propiedad pueda ejecutarse fuera de un navegador; en el código de una página, input sería el elemento de entrada seleccionado.

const input = { value: "Some Value" };
input.value = "New value";
console.log(input.value);

El ejemplo autónomo de JavaScript imprime:

New value

Seleccionar el elemento de entrada

Usa getElementById() cuando el campo tenga un ID único. Devuelve el elemento con ese ID, o null si no existe ninguno, así que comprueba el resultado antes de asignar un valor si el elemento podría no estar presente. Por ejemplo, el código de una página puede usar const input = document.getElementById("user-name"); y luego if (input) input.value = "New value";.

Usa querySelector() cuando un selector CSS permita localizar el campo, como document.querySelector('input[name="userName"]'). Devuelve el primer elemento coincidente, o null si no hay ninguno. Procura que el selector sea lo bastante específico para identificar el control deseado, sobre todo si la página contiene varios campos de entrada. Los ejemplos de selectores de esta sección son fragmentos para una página del navegador, no programas ejecutables independientes.

También se puede acceder a un formulario mediante la colección document.forms. Si el formulario se llama profile y tiene un control llamado userName, el código de la página puede acceder a él con document.forms["profile"].elements["userName"]. Esto depende de que esos nombres estén presentes y resulta útil al trabajar con un formulario conocido; para buscar elementos en general, suele ser más claro usar un ID o un selector CSS. document.forms es una colección, no una función.

Entender setAttribute() y el valor predeterminado

La propiedad value de un campo de entrada representa su valor actual. El atributo de contenido value proporciona el valor predeterminado, expuesto mediante la propiedad defaultValue. Llamar a setAttribute("value", "New default") cambia ese atributo y el valor predeterminado. No es un sustituto general de asignar un valor a input.value cuando se quiere cambiar lo que ve la persona usuaria. En particular, si el valor actual ya cambió mediante la propiedad o porque alguien editó el campo, cambiar el valor predeterminado no significa que también se haya actualizado el valor actual.

Usa input.value = "New value" para cambiar de inmediato el valor actual. Usa input.setAttribute("value", "New default") cuando quieras cambiar el valor predeterminado definido en el marcado. Aunque los nombres de estas operaciones se parecen, afectan a cosas distintas: elige según quieras cambiar el estado actual del control o su valor predeterminado.

Verificar el resultado y elegir un método

Después de seleccionar el campo, lee input.value para comprobar su valor actual. Si no cambió, primero confirma que el selector encontró el elemento deseado y que la asignación se ejecutó cuando el campo ya estaba disponible en la página. Si getElementById() o querySelector() no encuentra ningún elemento, devuelve null; intentar asignar un valor a través de ese resultado fallará, así que protege la búsqueda con una comprobación. Comprueba también que el código asigne un valor a la propiedad en vez de cambiar únicamente el atributo predeterminado.

Para actualizar directamente el valor actual, selecciona el campo por su ID único con getElementById() o mediante un selector CSS adecuado con querySelector(), y después asigna un valor a value. Usa document.forms cuando conozcas los nombres del formulario y del control. Recurre a setAttribute() solo si quieres cambiar el atributo de contenido o el valor predeterminado. Esta diferencia explica por qué cambiar un atributo quizá no actualice el texto que se muestra.