Fatal编程技术网
  • javascript/
  • Javascript 基于文本文件创建选项菜单？

Javascript 基于文本文件创建选项菜单？

javascript html file-io

Javascript 基于文本文件创建选项菜单？,javascript,html,file-io,filereader,optionmenu,Javascript,Html,File Io,Filereader,Optionmenu,我试图根据文本文件的内容自动创建一个选项菜单（使用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();

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


达到顶点
//调用谷歌地图API
你好
试试看
因为在运行
div.innerHTML=div.innerHTML+text时文件尚未读取

这就是为什么会有回调

见：

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



您需要在回调中设置
文本，而不是在开始加载后立即设置：


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;
/*************/



谢谢不过，我对JavaScript有点陌生。如何更改代码，使
div.innerHTML=div.HTML+text在文件已完全读取且处于数组中时运行？@user3015565答案在编辑中完成，如下面的答案中所示。我尝试了您建议的方法，但似乎不起作用。如果你有时间帮忙，我可以用它。（@cubitouch）我试过了，得到了第一个错误，“get_parameters（）called”但是在那之后什么也没有发生。
text.txt
只有两行，所以不像
freader
仍在读取文件。有什么建议吗？@user3015565在
console
中有什么错误吗？也发布相关的HTML，因为如果您的标签
id
错误，它将无法获取元素来替换其文本。不是吗这是我在控制台中遇到的错误。这会在我重新加载页面时立即弹出，而不是在我单击或与任何内容交互时弹出：
event.returnValue已弃用。请使用标准event.preventDefault（）相反。
我还添加了
HTML
。请参见我的编辑。@user3015565这不是一个错误，只是一个警告。这不会以任何方式阻止Javascript执行。@user3015565您确定您的文件路径吗？我通常使用如下相对路径：
imgs/whatevs.png
或
。/res/imgs/pic.jpg
，但我不确定通常使用
/thing.gif
我知道这在技术上是一个正确的路径，但这可能是导致错误的原因吗？我复制并粘贴了您的代码并加载了另一个文件，效果很好。此外，我删除了
“ISO-8859-1”
freader.readAsText需要一个文件对象，而不是字符串文件名。更改函数get_parameters（）函数获取_参数（文件）然后通过启动，并将“/test.txt”发送到e.@dandavis这是否要求用户选择要读取的文件？如果是，那不是我要查找的文件。
test.txt
是与HTML和JavaScript文件位于同一目录中的文件，其中包含的数据可能会根据我以前运行的另一个程序而变化。在这种情况下，请使用ajax.google up一个简单的ajax演示，并根据您的需要进行定制。@dandavis ajax需要服务器吗？我正在使用我的计算机和JavaScript在本地运行所有东西。