讀取xml文件有什麼不對？

這是簡單的HTML文件中讀取XML讀取xml文件有什麼不對？

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

返回此錯誤：

無法讀取屬性 '的addEventListener' 的null

有什麼不對？

來源

2017-08-18 kamome

做這個標記與id'file-input'存在於html中嗎？ 'document.getElementById（'file-input'）' – DevDio

這是返回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); 
});

來源

2017-08-18 10:00:43 David

謝謝。它工作，我理解這件事。 – kamome

讀取xml文件有什麼不對？

回答

相關問題