document.getElementById

xinxan22 · #1 (**permalink**) 14/05/2010, 01:03

Buenos días,
tengo el siguiente código y no me funciona, alguién puede decirme el por qué:

<script type="text/javascript" language="javascript">
//
cargar_pagina();
//
function cargar_pagina(){
alert("Aquí llega");
alert("Esto no se muestra:"+document.getElementById('id_algo').value );
}
//
function clic(){
alert("Esto funciona:"+document.getElementById('id_algo').valu e);
}
//
</script>

<input type="text" id="id_algo">
<input type="button" onclick="clic();">

Es curioso porque cuando me carga la página no me muestra el valor del input, pero cuando hago clic en el botón Sí.

Alguién puede decirme a que es debido.

Gracias

xinxan22 · #2 (**permalink**) 14/05/2010, 01:07

Estoy viendo que podría ser a causa del orden, es decir, si primero pongo el código de <inputs> y luego <script> funciona.

zerokilled · #3 (**permalink**) 14/05/2010, 01:14

invierte el orden, primero carga los inputs y luego el script. tal como lo tienes no te puede funcionar porque los navegadores analizan el contenido de forma lineal, es decir, segun van apareciendo en el codigo fuente. al momento de interpretar el codigo javascript, no existe los inputs. de modo que cuando se intenta obtener el elemento por getElementById, devuelve null porque ese elemento aun no existe.

Nisrokh · #4 (**permalink**) 14/05/2010, 23:11

O sino dejalo así, o incluso pon el código Javascript dentro el HEAD... Algo así:

Código HTML:

Ver original<html>
    <head>
        <title>Javascript Test</title>
        <script type="text/javascript">
            //<![CDATA[
            function load_page() {
                alert('Aquí llega');
                alert('Ahora si se muestra: ' + document.getElementById('some_input').value);
            }
 
            function clic() {
                alert('Esto funciona: ' + document.getElementById('some_input').value);
            }
            
            function whenLoaded(callback) {
                if (!document.body)
                    setTimeout(function() {
                        whenLoaded(callback);
                    }, 16);
                else callback();
            }
            
            whenLoaded(function() {
                load_page();
            });
            //]]>
        </script>
    </head>
    <body>
        <input type="text" id="some_input" value="My value" />
        <input type="button" onclick="clic()" value="Clic!" />
    </body>
</html>

¡Saludos!