I am running a function that populates several paragraph tags on a webpage with the days of the week. The function takes an array of days which is populated based on the current day (i.e. if today is Thursday, get the next 7 days in order).

My problem is that for some reason, I am unable to populate these tags. I have checked to make sure that the array is getting populated and the list is being iterated through. While both of these are true, none of the Inner HTML of the tags are being changed.

HTML:

<p class="mb-1" id="forecastDay1" runat="server">Day</p>
<p class="mb-1" id="forecastDay2" runat="server">Day</p>

JavaScript Function:

function populatePage(arry) {
    var i;

    for (i = 0; i < arry.length - 1; i++) {
        var id = "forecastDay" + i.toString();
        document.getElementById(id).innerHTML = arry[i].toString();
    }
}

I have also tried it this way:

document.getElementById("forecastDay" + i.toString()).innerHTML = arry[i].toString();

I am running a function that populates several paragraph tags on a webpage with the days of the week. The function takes an array of days which is populated based on the current day (i.e. if today is Thursday, get the next 7 days in order).

My problem is that for some reason, I am unable to populate these tags. I have checked to make sure that the array is getting populated and the list is being iterated through. While both of these are true, none of the Inner HTML of the tags are being changed.

HTML:

<p class="mb-1" id="forecastDay1" runat="server">Day</p>
<p class="mb-1" id="forecastDay2" runat="server">Day</p>

JavaScript Function:

function populatePage(arry) {
    var i;

    for (i = 0; i < arry.length - 1; i++) {
        var id = "forecastDay" + i.toString();
        document.getElementById(id).innerHTML = arry[i].toString();
    }
}

I have also tried it this way:

document.getElementById("forecastDay" + i.toString()).innerHTML = arry[i].toString();

• javascript
• html
• arrays
• getelementbyid

• When does the script run? Are you sure the elements are part of the DOM when it does run? Have you tried console.log() to see what document.getElementById() is returning? – Pointy Commented Aug 23, 2018 at 22:23
• Possible duplicate of Why does jQuery or a DOM method such as getElementById not find the element? – Heretic Monkey Commented Aug 23, 2018 at 22:27
• This function runs after the array is populated. The array is populated on the Page Load. I just tried the console.log and am getting a type error on the getElementById(); – Dr_Berry721 Commented Aug 23, 2018 at 22:30

2 Answers 2

You do not need toString in JavaScript.

Also, arrays start at 0, while your elements start at 1. You have to pensate that difference.

function populatePage(arry) {
  var i;

  for (i = 0; i < arry.length; i++) {
    var id = "forecastDay" + (i + 1);
    document.getElementById(id).innerHTML = arry[i];
  }
}

// Test it
populatePage(["Day 1", "Day 2"]);

<p class="mb-1" id="forecastDay1" runat="server">Day</p>
<p class="mb-1" id="forecastDay2" runat="server">Day</p>

There are a few things wrong with your code:

1. The first value of i is 0. Since there is not element #forecastDay0, getElementById will return null. Trying to access innerHTML of null will throw an error, thus breaking the for loop and every thing after it. You should check your console when something doesn't work, it's a great way to debug.
2. The check for the for loop should be i < arry.length not i < arry.length - 1.
3. You don't need any of the toString calls.

That being said, here is how it should be:

function populatePage(arry) {
    var i;
    for (i = 0; i < arry.length; i++) {
        var id = "forecastDay" + (i + 1);                         // i + 1 instead of just i. The casting to strings is done automatically
        document.getElementById(id).textContent = arry[i];        // use textContent as there isn't really any HTML
    }
}