tengo últimamente dudas con el momento en que debo cargar JavaScript. Os cuento...

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

Dejo el código...

    <!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>

Bueno, ese es el código. 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.