Question

我正在尝试根据文本文件的内容自动创建一个选项菜单（使用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>

Answer 1

因为在运行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");

Answer 2

您需要在开始加载后立即在回调中设置<div>文字：

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

   /*************
    ** TO HERE **
    ************/

   alert('file has been read');
}

/* MOVE THIS */
var div = document.getElementById('bottom_pane_options');
div.innerHTML = div.innerHTML + text;
/*************/

根据文本文件创建选项菜单？

2 个答案: