1

テキスト ファイルの内容に基づいて、(HTML と JavaScript を使用して) オプション メニューを自動的に作成しようとしています。私が望むのは、メニューの各オプションがテキスト ドキュメントの行になることです。

JavaScript は次のとおりです。

function get_parameters() {
    alert("get_parameters() called"); // these alerts are just to tell me if that section of the code runs
    var freader = new FileReader();

    var text = "start";
    freader.onload = function(e) {
        text = freader.result;
        alert('file has been read');
    }

    freader.onerror = function(e) {
        alert('freader encountered an error')
    }

    freader.readAsText('./test.txt', "ISO-8859-1");

    var div = document.getElementById('bottom_pane_options');
    div.innerHTML = div.innerHTML + text;
}

このコードでは、ファイルを読み取ってdiv「bottom_pane_options」に出力することだけを達成しようとしていますが、それが機能しない理由を見つけることができません。私の方法が最も効率的でない場合は、動作するコードを教えてください。

ありがとう。

- 編集 -

ここにHTMLがあります

<!DOCTYPE html>
<html>
    <head>
    <title>Culminating</title>
    <link href="style.css" rel="stylesheet" type="text/css">

    <script
        src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCJnj2nWoM86eU8Bq2G4lSNz3udIkZT4YY&sensor=false">
    </script>

    <script>
        // Calling the Google Maps API
    </script>
</head>

<body>
    <div class="content">
        <div id="googleMap"></div>
        <div id="right_pane_results">hi</div>
        <div id="bottom_pane_options">
            <button onclick="get_parameters()">Try It</button>
        </div>
    </div>
</body>
<script type="text/javascript" src="./javascript.js"></script>
</html>
4

2 に答える 2

0

を実行しているときにファイルがまだ読み取られていないためですdiv.innerHTML = div.innerHTML + text;。

そのため、コールバックがあります。

https://developer.mozilla.org/en-US/docs/Web/API/FileReaderを参照してください:

FileReader オブジェクトを使用すると、Web アプリケーションはファイルの内容を非同期的に読み取ることができます [...]

代わりにこれを使用してください：

freader.onload = function(e) {
    text = freader.result;

    var div = document.getElementById('bottom_pane_options');
    div.innerHTML = div.innerHTML + text;
    alert('file has been read');
}

freader.onerror = function(e) {
    alert('freader encountered an error')
}

freader.readAsText('./test.txt', "ISO-8859-1");
于 2014-01-16T22:11:27.923 に答える