Question

好的，我这里有一个名为“test.txt”的文本文件。这个文件的内容是12,14,16和18，每个都在各自的行上。我想获取这些数字，并将它们读入我的HTML代码中的四个不同的输入元素。 HTML元素如下：

<input type="text" id="p1" class="p1" readonly>
<input type="text" id="p2" class="p2" readonly>
<input type="text" id="p3" class="p3" readonly>
<input type="text" id="p4" class="p4" readonly>

我还没有任何javascript或类似的东西。

任何帮助都很棒：）

Answer 1

我认为您不想将数字读入输入元素。听起来不太好。您可能希望在页面上显示它们并添加一些样式。您可以使用以下代码作为起点。

function readTextFile() {
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", "file.txt", true);
    rawFile.onreadystatechange = function() {
        if (rawFile.readyState === 4) {
            var allNumbs = rawFile.responseText;

            var arrayOfLines = allNumbs.split("\n");

            for (var i = 0; i < arrayOfLines.length; i++) {

                var element = document.createElement("p");

                element.id = "p" + (i + 1);
                element.className = "p" + (i + 1);
                element.innerHTML = arrayOfLines[i];
                document.body.appendChild(element);
            }
        }
    }
    rawFile.send();
}
readTextFile();

我的file.txt看起来像这样。

html输出：

<p id="p1" class="p1">12</p>
<p id="p2" class="p2">15</p>
<p id="p3" class="p3">16</p>
<p id="p4" class="p4">17</p>
<p id="p5" class="p5">28</p>

将外部文本文件插入输入元素

1 个答案: