如何用Javascript将一个文本文件加载到数组中?

问题描述 投票:0回答:1

你能帮助我如何通过Javascript将一个文本文件通过本地文件加载到一个数组中吗?

我是一个相当多的编程初学者,想为我的侄女开发一个小型词汇测试。目前,我正在手动编写问题和解决方案。但是,我想只加载一个本地文件,如果可能的话,我可以使用这个文件,然后通过数组索引工作。你能帮我解释一下如何将本地文本文件加载到数组中吗?

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>Vokabeltrainer</title>
    <meta http-equiv="cache-control" content="no-cache">
    <script src=#"></script>
    <script src="#"></script>
    <link href="bootstrap.min.css" rel="stylesheet">
    <link href="custom.css" rel="stylesheet">
</head>

<body>

    <main>
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-sm-12 col-md-12">
                    <h1>Leonie's Vokabeltrainer</h1>
                    <hr>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12 col-sm-12 col-md-12">
                    <img src="pictures/Bild3.jpg">
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12 col-sm-12 col-md-12">
                    <p>Liebe Leonie, hier kannst Du die Verbformen für das Simple Present üben!</p>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-2 col-sm-12 col-md-12">
                    <strong>Grundform</strong>
                </div>
                <div class="col-lg-2 col-sm-12 col-md-12">
                    <strong>Personalpronomen</strong>
                </div>
                <div class="col-lg-2 col-sm-12 col-md-12">
                    <strong>Simple Present:</strong>
                </div>
                <div class="col-lg-2 col-sm-12 col-md-12">
                    <!--Hier kommt die Lösung hin, wenn falsch oder richtig geraten wurde-->
                </div>
            </div>
            <div class="row">
                <div class="col-lg-2 col-sm-12 col-md-12">
                    (to) run
                </div>
                <div class="col-lg-2 col-sm-12 col-md-12">
                    He...
                </div>
                <div class="col-lg-3 col-sm-12 col-md-12">
                    <input type="text" id="check1">
                </div>
                <div class="col-lg-2 col-sm-12 col-md-12">
                    <button onclick="checkSolution()">Prüfen!</button>
                </div>
                <div class="col-lg-2 col-sm-12 col-md-12">
                    <p id="solution1">
                </div>
            </div>
            <div class="row">
                <div class="col-lg-2 col-sm-12 col-md-12">
                    (to) go
                </div>
                <div class="col-lg-2 col-sm-12 col-md-12">
                    They...
                </div>
                <div class="col-lg-3 col-sm-12 col-md-12">
                    <input type="text">
                </div>
                <div class="col-lg-2 col-sm-12 col-md-12">
                    <button>Prüfen!</button>
                </div>
                <div class="col-lg-2 col-sm-12 col-md-12">
                    <!--Hier kommt die Lösung hin, wenn falsch oder richtig geraten wurde-->
                </div>
            </div>
            <div class="row">
                <div class="col-lg-2 col-sm-12 col-md-12">
                    (to) carry
                </div>
                <div class="col-lg-2 col-sm-12 col-md-12">
                    She...
                </div>
                <div class="col-lg-3 col-sm-12 col-md-12">
                    <input type="text">
                </div>
                <div class="col-lg-2 col-sm-12 col-md-12">
                    <button>Prüfen!</button>
                </div>
                <div class="col-lg-2 col-sm-12 col-md-12">
                    <!--Hier kommt die Lösung hin, wenn falsch oder richtig geraten wurde-->
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12 col-sm-12 col-md-12">
                    <p id="punke">
                </div>
            </div>
        </div>
    </main>

</body>
<script>

    let counter = 0;
    function checkSolution() {
        InputText = document.getElementById("check1").value;
        if (InputText === 'runs') {
            document.getElementById('solution1').innerHTML = 'super';
            counter++;
            document.getElementById('punke').innerHTML ='Deine Punkte: ' +counter;
        }
        else {
            document.getElementById('solution1').innerHTML = 'nicht super';
        }
    }
</script>

</html>
javascript html css
1个回答
0
投票

使用纯JS

var dataFile = require("dataFile");
dataFile.readFile("./yourFile.txt", function(text){
    var textByLine = text.split("\n")
});
© www.soinside.com 2019 - 2024. All rights reserved.