¿Por qué document.getElementById('files') devuelve nulo?

El siguiente código simplemente no funcionó.

document.getElementById('files').addEventListener('change', handleFileSelect, false);

Firebug informó que este getElementById es nulo pero agregué un texto y está funcionando ...

parece que los codigos son correctos...

actualizaciones: esta es la página html

<script type="text/javascript">

   document.getElementById('files').addEventListener('change', handleFileSelect,   false);
   document.getElementById('username');
   function handleFileSelect(evt) {
   alert('i am called');
   var files = evt.target.files; // FileList object

 // files is a FileList of File objects. List some properties.
 var output = [];
 for (var i = 0, f; f = files[i]; i++) {
  output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
              f.size, ' bytes, last modified: ',
              f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
              '</li>');}
  document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';}
</script>
</head>
<body>
<form>
<input type="text" id="username" />
<input type="file" id="files"  />
<div id="list"></div>
</form>
</body>
</html>

preguntado el 04 de julio de 12 a las 03:07

¿Qué quieres decir con "pero agregué un texto y está funcionando"? -

@JobSmith: danos más código. Su fragmento no nos brinda una descripción general lo suficientemente amplia como para que sepamos qué puede salir mal y dónde. ¿Dónde está este fragmento JS en su documento y cuándo se ejecuta? ¿El fragmento de código HTML se carga estáticamente con la página o se crea dinámicamente? Muéstranos más código. -

@Claudio Redi Agregué funciona -

@JobSmith: ¿cómo tiene eso algo que ver con su problema? -

@JobSmith: retrocedamos... Que estás tratando de hacer, en general, con este código y su programa en general? -

1 Respuestas

Eso es porque está tratando de obtener un elemento, mientras que el elemento en sí aún no está cargado. Debe mover el JavaScript hacia abajo, después del elemento, o ejecutar el código como devolución de llamada cuando la página haya terminado de cargarse.

document.addEventListener('DOMContentLoaded', function(){
    document.getElementById('files').addEventListener('change', handleFileSelect, false);
    document.getElementById('username');
    function handleFileSelect(evt) {

        alert('i am called');

        var files = evt.target.files; // FileList object

        // files is a FileList of File objects. List some properties.
        var output = [];
        for (var i = 0, f; f = files[i]; i++) {
            output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
            f.size, ' bytes, last modified: ',
            f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
              '</li>');
        }
        document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
    }
}, false);

Respondido 04 Jul 12, 04:07

Por lo general, es una buena práctica incluir cualquier JavaScript en la parte inferior de la justo antes del cierre etiqueta para la optimización. - natlee75

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.