2

Tengo una duda muy básica que creía saber pero que me está volviendo loco. Ayuda, please!!!

Os cuento, es sencillo...

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
  <script>
  document.f1.f1t1.value = 30
  </script>
<title>Document</title>
</head>
<body>
  <form name="f1" id="f1">
  <input type="text" name="f1t1" id="f1t1">
  </form>
</body>
</html>

Yo quiero imprimir el número 30 dentro del campo de texto desde JavaScript, como valor por defecto y de inicio. Entiendo que esta es la sintaxis correcta pues accedo al campo de formulario siguiendo su jerarquía DOM y le indico que su valor es 30.

Pues bien, lo que me ocurre es que en pantalla mi campo de texto me carga vacío y el inspector de Google Chrome me dice que "Uncaught TypeError: Cannot read property 'f1t1' of undefined". Es como si no reconociera el objeto "f1" y además como si interpretase "f1t1" como una propiedad de "f1".

Bueno, ahí dejo la duda a ver si alguien me echa un cable.

Muchas gracias.

3 respuestas 3

8

Si utiliza jquery, puede hacer asi:

HTML

<input type="text" name="f1t1" id="f1t1">

JAVASCRIPT/jQuery

$("#f1t1").val('30');

"$" refiere a jQuery; entonces puede buscar el elemento con "("#f1t1")" y despues asignar el valor con ".val('30');"

4
  • Gracias por la respuesta pero no conozco aún jQuery. Todo llegará...
    – Hugo
    el 29 abr. 2016 a las 18:16
  • Vale la pena si te echo a vista a eso: jquery es mas poderoso y tambien menos dificil que javascript solo. el 29 abr. 2016 a las 18:20
  • 2
    Lo tendré en cuenta, sin duda. Es una de las metas que tengo para el futuro próximo. El problema es que tengo muchas metas pendientes... (Bootstrap, PHP, Less, Sass, PostCSS...)
    – Hugo
    el 29 abr. 2016 a las 18:27
  • 1
    ahi te dejo un punto
    – ByGroxD
    el 13 jun. 2017 a las 15:23
3

Entiendo lo que quieres hacer, aunque hay otras formas más elaboradas de hacerlo.

Para que te funcione tal y como querés hacerlo, tienes que colocar el script en el body, despues de tu etiqueta form.

De la siguiente forma:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>

</head>
<body>
  <form name="f1" id="f1">
    <input type="text" name="f1t1" id="f1t1">
  </form>

  <script>
    document.f1.f1t1.value = 30
  </script>
</body>
</html>

De ésta forma, tu script se ejecutará cuando los controles (formulario y textbox) ya estén cargados en el DOM.

Si querés ver el código funcionando te lo dejo en JSBIN: http://jsbin.com/zafaset/edit?html,console,output

1
  • Muchas gracias. Ese era el error, estoy cargando el JavaScript en el <head> y todavía no se ha creado el objeto de formulario. Por eso no lo encuentra. Muchas gracias otra vez.
    – Hugo
    el 29 abr. 2016 a las 18:14
3

Te falta decirle a Js en que momento queres que se imprima.

Cuando Carga el DOM, se Crea la función "X" y se le indica a js que al inicio ejecute esa función con window.onload = X;

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
  <script>
function inicio(){
       document.f1.f1t1.value = 30
    };
    window.onload = inicio;
 
  </script>
<title>Document</title>
</head>
<body>
  <form name="f1" id="f1">
  <input type="text" name="f1t1" id="f1t1">
  </form>
</body>
</html>

1
  • Muchas gracias por la respuesta. La verdad es que quería hacerlo sin una función y la respuesta de Wanderson Peraza ha sido justo lo que buscaba.
    – Hugo
    el 29 abr. 2016 a las 18:16

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.