Use variable inside the FOR loop

Question

All i want to do is to call the FOR variable inside my loop. But for some reason is not working...

HTML

<span id="1"></span>
<span id="2"></span>
<span id="3"></span>

JAVASCRIPT

for (j = 0; j < 3; j++) {
  var product = j;
  document.getElementById(product).innerHTML = "blah";
}

https://jsfiddle.net/cq47eo1c/

needs a document.ready or something. it's running before the dom loads. — Nikki9696, Mar 16 '16 at 21:09
You start your loop at 0 and there is no element with that ID. You're also executing your code too early in the fiddle. — j08691, Mar 16 '16 at 21:10
also, technically an ID that begins with a number is invalid HTML — Joseph Marikle, Mar 16 '16 at 21:10
@Nikki9696: If you look at the fiddle, it's running in the onLoad. Of course, that may be completely by accident since it's the default for JS Fiddle. The problem is with the index. — Matt Burland, Mar 16 '16 at 21:11
@MattBurland yes, I see that now, and the ids shouldn't just be a number maybe as was mentioned by joe but I'm not positive on that one — Nikki9696, Mar 16 '16 at 21:12
Reopened the question, the problem was not that the script was running before the HTML was loaded. — Juan Mendes, Mar 16 '16 at 21:13
@JuanMendes: True, but it should probably be closed as a typo anyway. — Matt Burland, Mar 16 '16 at 21:13
@JosephMarikle That's not true in HTML 5, https://www.w3.org/TR/html5/dom.html#the-id-attribute `There are no other restrictions on what form an ID can take; in particular, IDs can consist of just digits, start with a digit, start with an underscore, consist of just punctuation, etc.` — Juan Mendes, Mar 16 '16 at 21:14
@JosephMarikle - It's valid in HTML5, although CSS selectors can have a hard time with it. — j08691, Mar 16 '16 at 21:14
@JuanMendes and j08691 Cool! Thanks for letting me know. The numeric first character restriction on IDs was super annoying. — Joseph Marikle, Mar 16 '16 at 21:17
@MattBurland So I took at what I wrote and to be honest wondered why I was in that frame of mind. My train of thought was more towards declaring j in `for (var j=0;` In the past, I was always operating this way with loop parameters. But yeah, I feel silly now. — JoeL, Mar 16 '16 at 21:17
Related: [Why does jQuery or a DOM method such as getElementById not find the element?](http://stackoverflow.com/q/14028959/218196). More importantly, learn how to debug your code. Stack Overflow is not a debugging service. — Felix Kling, Mar 16 '16 at 22:01

score 1 · Accepted Answer · answered Mar 16 '16 at 21:15

The problem is that you are trying to find an element with the ID of 0 and it doesn't exist so your script errors out when trying to access the innerHTML property of null (what was returned by the call to document.getElementById(0)). Dev tools is your friend, always look for error messages.

Uncaught TypeError: Cannot set property 'innerHTML' of null

for (j = 1; j <= 3; j++) {
  var product = j;
  document.getElementById(product).innerHTML = "blah";
}

<span id="1"></span>
<span id="2"></span>
<span id="3"></span>

https://jsfiddle.net/cq47eo1c/

Use variable inside the FOR loop

1 Answers1