Pass variable into document.getElementById() - Javascript

Question

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();

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, Aug 23 '18 at 22:23
Possible duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Heretic Monkey, Aug 23 '18 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, Aug 23 '18 at 22:30

ibrahim mahrir · Answer 1 · 2018-08-23T22:31:43.353

2

There are a few things wrong with your code:

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.
The check for the for loop should be i < arry.length not i < arry.length - 1.
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
    }
}

edited Aug 23 '18 at 22:31

answered Aug 23 '18 at 22:26

ibrahim mahrir

28,583
5
34
61

Thanks for the insight, however I still am getting the following: – Dr_Berry721 Aug 23 '18 at 22:46
TypeError: document.getElementById(...) is null – Dr_Berry721 Aug 23 '18 at 22:46
@Dr_Berry721 Are you sure there is enough element of the `forecastDay###`? **i.e** are there enough element to match `arry.length`? How many do you have? – ibrahim mahrir Aug 23 '18 at 22:52

score 2 · Accepted Answer · answered Aug 23 '18 at 22:33

2

You do not need toString in JavaScript.

Also, arrays start at 0, while your elements start at 1. You have to compensate 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>

answered Aug 23 '18 at 22:33

SapuSeven

1,252
16
26

Seem to still be getting a TypeError: document.getElementById(...) is null for some reason – Dr_Berry721 Aug 23 '18 at 22:47
The code works for the part you provided. Try adding `console.log(id)` just before `getElementById` and check if an element with the corresponding ID exists. – SapuSeven Aug 23 '18 at 22:50
After doing the console.log, I've noticed that the HTML tag gets changed to id="MainContentPlaceHolder_forecastDay1", this is due to the fact that I am using a Site.Master Page in ASP.NET, my solution is now working. Thanks! – Dr_Berry721 Aug 23 '18 at 22:55

Pass variable into document.getElementById() - Javascript

2 Answers2