3

Tengo una caja de formulario y quiero que acepte el valor que teclee el usuario y lo escriba en una lista que hay más abajo. No quiero utilizar funciones, es un reto.

Llevo el siguiente codigo:

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <title>Mi documento</title>
        <script>
            var valorname = document.f1.nombre.value
        </script>
    </head>
    <body>
        <form name="f1">
            <input type="text" name="nombre" onchange="document.getElementById('elemento1').innerHTML=valorname">
        </form>
        <br><br>
        <ul>
            <li id="elemento1"></li>
        </ul>
    </body>
</html>

Como veis he pintado una caja de formulario y una lista. Como he dicho lo que quiero es que al teclear en la caja de texto, como ésta cambia, al salir de ella que se rellene el elemento de lista con el valor introducido en la caja.

El problema que tengo es que me sale undefined, como si no guardase en la variable lo introducido en la caja de texto. No sé si es un problema de tiempo de ejecución, aunque creo que el código JavaScript sí es capaz de obtener el dato y almacenarlo en la variable; lo digo fundamentalmente porque haciéndolo con una función sí funciona.

Como digo, no quiero usar funciones. Es simplemente un reto.

Muchas gracias. Un saludo.

1
  • El HTML se ejecuta a medida que carga de manera que en el momento de usar "f1", ese aun no existe, por eso aparece "undefined" Si lo haces después tampoco funcionará porqué estará vacio. Debes actualizar en el momento de rellenar el form. Commented el 3 may. 2016 a las 13:13

4 respuestas 4

5

El problema es que recuperas el valor del input en la carga de la página, cuando ni siquiera se ha creado.

Debes recuperar el valor cuando se produce el evento change:

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <title>Mi documento</title>
    </head>
    <body>
        <form name="f1">
            <input type="text" name="nombre" onchange="document.getElementById('elemento1').innerHTML=this.value">
        </form>
        <br><br>
        <ul>
            <li id="elemento1"></li>
        </ul>
    </body>
</html>
1

Si quieres almacenar además el valor en una variable, puedes declarar la variable al comienzo del script y dejar el evento onchange de esta forma:

onchange="document.getElementById('elemento1').innerHTML = valorname = this.value"

Así, al lanzar el evento onchange consigues obtener el valor de dicho input y almacenarlo en la variable valorname.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi documento</title>

</head>
<body>
    <script>
        var valorname;
    </script>
    <form name="f1">
        <input type="text" name="nombre" onchange="document.getElementById('elemento1').innerHTML = valorname = this.value">
    </form>
    <br><br>
    <ul>
        <li id="elemento1"></li>
    </ul>
</body>

1
  • 1
    Fenomenal. Muchas gracias. Solucionado!!
    – Hugo
    Commented el 4 may. 2016 a las 11:40
1

En el onchange te queda mejor ir a traer el valor directamente al objeto, no a la variable que tenes declarada en tu script, de esta forma:

onchange=" document.getElementById('elemento1').innerHTML=document.f1.nombre.value"

Ya que la variable valorname al estar en el head se está cargando cuando el contenido del body aún no ha llegado al DOM, por eso la referencia queda como undefined.

0

Ok. Muchas gracias a los dos. Las dos posibilidades son válidas. La única pega es que no estoy almacenando el valor en ninguna variable, de manera que no podrá reutilizarlo.

2
  • Pero siempre podrás obtener el valor utilizando: document.f1.nombre.value, o bien, cuál es el motivo por el que querés que el valor quede en una variable? Commented el 4 may. 2016 a las 14:30
  • Quiero que el valor quede en una variable simplemente para poder reutilizarlo después- Entiendo que si no guardo el valor en una variable no puedo darle uso a ese valor nada más que en el momento concreto en que lo creo.
    – Hugo
    Commented el 10 may. 2016 a las 7:36

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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