Question

这是用于读取xml的简单html文件

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>simple script javascript</title>
    <script src="scripts/jquery-3.2.1.min.js"></script>
    <script src="scripts/lector.js"> </script>
</head>
<body>
    <h1>"web is running"</h1>
    <input type="file" id="file-input" />
    <h3>Contenido del archivo:</h3>
    <pre id="contenido-archivo"></pre>
</body>

和lector.js如下：

    function leerArchivo(e) {
    var archivo = e.target.files[0];
    if (!archivo) {
      return;
    }
    var lector = new FileReader();
    lector.onload = function(e) {
      var contenido = e.target.result;
      mostrarContenido(contenido);
    };
    lector.readAsText(archivo);
  }
  function mostrarContenido(contenido) {
    var elemento = document.getElementById('contenido-archivo');
    elemento.innerHTML = contenido;
  }
  document.getElementById('file-input')
    .addEventListener('change', leerArchivo, false);
document.getElementById('file-input').addEventListener('change', leerArchivo, false);
console.log(contenido);

返回此错误：

无法读取null

的属性'addEventListener'

出了什么问题？

Answer 1

这将返回null：

document.getElementById('file-input')

因为代码在之前执行，所以页面上存在该元素。即使在完整文档加载完成之前，JavaScript也会按照HTML文档中的顺序进行处理。

您可以将JavaScript移至页面末尾：

<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>simple script javascript</title> <script src="scripts/jquery-3.2.1.min.js"></script> </head> <body> <h1>"web is running"</h1> <input type="file" id="file-input" /> <h3>Contenido del archivo:</h3> <pre id="contenido-archivo"></pre> <script src="scripts/lector.js"></script> </body>

（如果你愿意，jQuery库仍然可以在页面的开头加载，因为它不会立即尝试与页面交互，它只是初始化自己。但是由于你的脚本试图与页面交互，它需要等到页面加载。）

或者，既然您还在加载jQuery，您可以使用它轻松等待文档准备就绪。像这样：

$(function () { document.getElementById('file-input').addEventListener('change', leerArchivo, false); document.getElementById('file-input').addEventListener('change', leerArchivo, false); console.log(contenido); });

读取xml文件有什么问题？

1 个答案: