Создание меню параметров на основе текстового файла?

Я пытаюсь автоматически создать меню параметров (используя 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>
Источник

2 ответа

Поскольку файл еще не был прочитан при запуске div.innerHTML = div.innerHTML + text;,

Вот почему есть обратные вызовы.

См. https://developer.mozilla.org/en-US/docs/Web/API/FileReader:

Объект FileReader позволяет веб-приложениям асинхронно читать содержимое файлов [...]

Используйте это вместо:

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");
Источник

Вам нужно установить <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;
/*************/
Источник
Другие вопросы по тегам