xmlファイルを読むのが間違っていますか？

これは、XMLxmlファイルを読むのが間違っていますか？

<!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を読み取るための単純なHTMLファイルで、次のとおりです。

このエラーを返す

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ファイルを読むのが間違っていますか？

答えて

関連する問題