為什么我的 javascript 文件不使用我的文本文件中的數據？

Question

我的 JS：

function updateDisplay() {
    var url = 'data.txt';

    fetch(url).then(function(response) {
        response.text().then(function(text) {

            var request = new XMLHttpRequest();
            request.open('GET', url);
            request.responseType = 'text';

            text = request.response;

            textArr = text.split("\n")
            request.onload = function() {
                document.getElementById('con').textContent = textArr[0];
                document.getElementById('new').textContent = textArr[1];
                document.getElementById('dec').textContent = textArr[2];
                document.getElementById('unr').textContent = textArr[3];
                document.getElementById('rec').textContent = textArr[4];
            };
            request.send();

        });    
    });

};

window.onload = function(){
    updateDisplay();
}

HTML：

        <p id="con" style="color: rgb(101, 221, 155); font-family: robotobold; font-weight: bold; text-align: center; border-bottom: 0; font-size: 50px; margin-bottom: 0px;">
               data1</p>
        <p style="color: #D4E1E4; font-size: 18px; font-family: robotoregular; font-weight: regular; border-bottom: 0; text-align: center;">
               <b>con</b></p>
        <p id="new" style="color: #FF9D00; font-family: robotobold; font-weight: bold; text-align: center; border-bottom: 0; font-size: 50px; margin-bottom: 0px;">
                data2</p>
        <p style="color: #D4E1E4; font-size: 18px; font-family: robotoregular; font-weight: regular; border-bottom: 0; text-align: center;">
                <b>new</b></p>
        <p id="dec" style="color: #F65164; font-family: robotobold; font-weight: bold; text-align: center; border-bottom: 0; font-size: 50px; margin-bottom: 0px;">
                data3</p>
        <p style="color: #D4E1E4; font-size: 18px; font-family: robotoregular; font-weight: regular; border-bottom: 0; text-align: center;">
                <b>dec</b></p>
        <p id="unr" style="color: rgb(248, 245, 64); font-family: robotobold; font-weight: bold; text-align: center; border-bottom: 0; font-size: 50px; margin-bottom: 0px;">
                data4</p>
        <p style="color: #D4E1E4; font-size: 18px; font-family: robotoregular; font-weight: regular; border-bottom: 0; text-align: center;">
                <b>unr</b></p>
        <p id="rec" style="color: rgb(68, 155, 226); font-family: robotobold; font-weight: bold; text-align: center; border-bottom: 0; font-size: 50px; margin-bottom: 0px;">
                data5</p>
        <p style="color: #D4E1E4; font-size: 18px; font-family: robotoregular; font-weight: regular; border-bottom: 0; text-align: center;">
                <b>rec</b></p>

但是，屏幕上的文字不會改變。

當我使用 console.log(textArr) 時，它會打印出正確的數據。 當我 console.log(textArr[1] 時，它會打印出正確的數據。等等......

問題是元素“新”向下不會改變。

這里有什么問題？

Answer 1

您嘗試從 XMLHttpRequest 對象讀取響應...

 text = request.response; textArr = text.split("\n")

…在onload事件處理程序之外。 即在響應到達之前。