Tutoriales formativos

Asignar valor a un objeto html con Javascript utilizando document.getElementById

En este nuevo tutorial de javascript y de forma muy rápida, vamos a explicar como dar o asignar un valor a una caja de texto (inputbox) de html, para ello utilizaremos document.getElementById(), pero primero pongamos el objeto en cuestión:

<form name=»frmTabla» id=»frmTabla»>
<input name=»txtTabla» type=»text» id=»txtTabla» value=»»>
</form>

Una vez que tenemos declarado el objeto, veamos como asignar el valor:

document.getElementById(«txtTabla»).value = «Tutorial Javascript»;

Esto añadiría el string «Tutorial Javascript» a la caja de texto designada con el id «txtTabla»

Así de sencillo!

Un saludo!

Carlos Dk

Apasionado por la enseñanza y el SEO

18 comentarios en «Asignar valor a un objeto html con Javascript utilizando document.getElementById»

  • Siempre y cuando este dentro de un

    window.onload = function(){
    document.getElementById(‘widget-generalcode’).innerHTML = ‘test’;
    };

    sino tira error

    Respuesta
    • Gracias!!. Llevaba casi una hora intentando cargar un input desde javascript. Efectivamente haciendo uso del onload funcionó. De hecho construí una función y ni llamando la función se solucionó. Gracias de nuevo!.

      Respuesta
  • Como bien dices Fredd, hay que añadirlo dentro de alguna función, en tu caso en el evento load del documento.

    Gracias por el aporte 😉

    Respuesta
  • amigo disculpa, en mi caso no tengo el id del input, solo tengo el name, como podria hacer en ese caso

    Respuesta
    • Cambia la función getElementById por getelementsbyname y asignale el nombre. El resultado ha de ser exactamente igual.

      Un saludo!

      Respuesta
    • Necesito que me expliques un poco más, un for es una iteración sabiendo la totalidad de elementos, pero ¿asignar los valores a qué?

      Espero tu respuesta 😉

      Respuesta
  • Me pueden ayudar con el mismo ejemplo pero viceversa, asignar el texto de un input a una variable JavaScript. Lo intento hacer para imprimir lo que capture en un alert pero me sale INDEFINIDE. Ayuda Por favor!!

    Respuesta
    • Bueno, por lógica debería de hacerse alert(document.getElementById(“txtTabla”).value);

      Aunque por facílidad, te recomiendo utilizar JQuery, es mucho más sencillo y rápido de entender 😉

      Un saludo!

      Respuesta
  • me podrían ayudar tengo el siguiente campo:

    el valor del input es 100 como puedo hacer para cambiar ese valor y que muestre esto

    como puedo hacerlo con javascript

    Respuesta
    • Los comentarios no aceptan código como tal, deberás de escribirlo con algún espacio para que no se parsee y oculte.
      Así quizás te pueda ayudar 🙂

      Respuesta
  • Hola colegas:

    Yo me pare en esta parte, al final pude resolver asi:

    En JS
    $(«input[name=NOMBRE_DEL_INPUT]»).val(VARIABLE);

    En el HTML

    Y ya pude recibir el dato en el INPUT directo desde el JS

    Respuesta

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.