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>在回调中设置文本，而不是在开始加载后立即设置：

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;
/*************/
于 2014-01-16T22:18:15.200 回答
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 回答