Solution 1 :

You try to read the response from the XMLHttpRequest object…

        text = request.response;

        textArr = text.split("n")

outside the onload event handler. i.e. before the response has arrived.

Problem :

My 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>


However, the text on screen doesn’t change.

When I console.log(textArr), it prints out the correct data.
When I console.log(textArr[1], it prints out the correct data.
And so on…

The problem is that the elements ‘new’ downwards don’t change.

What’s wrong here?

Comments

Comment posted by Quentin

Why on earth are you

Comment posted by Liam Williamson

what would be the way that you do it – i moved them into the onload handler, but nothing has changed.

Comment posted by Quentin

@LiamWilliamson — Given the correction you described, the code works when I test it.

By