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

  • el 27 junio, 2014 a las 4:32 am
    Permalink

    Siempre y cuando este dentro de un

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

    sino tira error

    Respuesta
    • el 30 agosto, 2020 a las 2:52 am
      Permalink

      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
  • el 27 junio, 2014 a las 9:46 am
    Permalink

    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
  • el 19 octubre, 2016 a las 3:07 pm
    Permalink

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

    Respuesta
    • el 24 octubre, 2016 a las 10:56 am
      Permalink

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

      Un saludo!

      Respuesta
  • el 10 enero, 2017 a las 11:40 pm
    Permalink

    Me gustaría saber como asignar valores en un for

    Respuesta
    • el 11 enero, 2017 a las 12:48 pm
      Permalink

      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
  • el 13 enero, 2017 a las 11:00 pm
    Permalink

    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
    • el 13 enero, 2017 a las 11:58 pm
      Permalink

      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
  • el 12 marzo, 2019 a las 2:30 am
    Permalink

    Esta en javascript o jquery???

    Respuesta
  • el 9 diciembre, 2019 a las 12:46 am
    Permalink

    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
    • el 10 diciembre, 2019 a las 9:16 am
      Permalink

      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
  • el 10 marzo, 2020 a las 4:53 am
    Permalink

    Excelente, muy buena explicación.

    Respuesta
  • el 12 noviembre, 2021 a las 4:05 am
    Permalink

    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.

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