CODEWITHSUNDEEP
javascripthtml
bleat interteiment
bleat interteiment

Reputation: 1459

getElementById variable + number

This is my code:

var num = 1;
var letter = 'a' + num;
var aLetter = document.getElementById(letter);

for (var x = 0; x < 10; x++) {
    alert(aLetter.innerHTML);
    num++;
}

Purpose of this code is to alert the content of these html tags by order:

<span class="alphStyle" id="a1">a</span>
<span class="alphStyle" id="a2">b</span>
<span class="alphStyle" id="a3">c</span> ...

But it only alerts the first tags content, and doesn't go further.

Why is that?

Upvotes: 0

Views: 2013

Answers (6)

Raul R.
Raul R.

Reputation: 196

In your code aLetter ref to the same document element. Do the getElementById instruction inside the for loop. Additionally the num var is redundant because the for var x can made the same job.

for (var x = 1; x < 4; x++) {
    var aLetter = document.getElementById('a' + x);
    alert(aLetter.innerHTML);
}
<span class="alphStyle" id="a1">a</span>
<span class="alphStyle" id="a2">b</span>
<span class="alphStyle" id="a3">c</span>

Upvotes: 1

Daniel Brose
Daniel Brose

Reputation: 1403

Scope

You updating num++ has no effect as its never being used again, its outside the scope of that loop.

Try something like this instead:

var num = 1;
for (var x = 0; x < 4; x++) {
    alert(document.getElementById('a' + num).innerHTML);
    num++;
}
<span class="alphStyle" id="a1">a</span>
<span class="alphStyle" id="a2">b</span>
<span class="alphStyle" id="a3">c</span>

Or even

var num = 1;
for (var x = 0; x < 4; x++) {
    alert(document.getElementById('a' + num++).innerHTML);
}
<span class="alphStyle" id="a1">a</span>
<span class="alphStyle" id="a2">b</span>
<span class="alphStyle" id="a3">c</span>

Or even

for (var num = 1; num < 4; num++) {
    alert(document.getElementById('a' + num).innerHTML);
}
<span class="alphStyle" id="a1">a</span>
<span class="alphStyle" id="a2">b</span>
<span class="alphStyle" id="a3">c</span>

Or even

var el;
for (var num = 1; num < 4; num++) {
    el = document.getElementById('a' + num);
    alert(el.innerHTML);
}
<span class="alphStyle" id="a1">a</span>
<span class="alphStyle" id="a2">b</span>
<span class="alphStyle" id="a3">c</span>

Im sure you can see the patterns here. There are many articles out there on the logic behind this, its a very simple concept though and your learning resources should be great to help you (or general google search).

https://www.sitepoint.com/demystifying-javascript-variable-scope-hoisting/

Always look for working code doing anything remotely similar first, then ask yourself what they are doing different?

And keep your search general, this question should be called "looping with increment, not working when calling alert". Then you would find results matching this when you search (BEFORE posting)

Upvotes: 0

Len
Len

Reputation: 142

The logic in the program has to be changed to get alert for all html tags:

var num = 1;
var letter = 'a' + num;
var aLetter = document.getElementById(letter);

for (var x = 0; x < 10; x++) {
    alert(aLetter.innerHTML);
    num++;
    letter = 'a' + num;
    aLetter = document.getElementById(letter);
}

Please make sure num doesn't exceed the no of HTML tags and this can be controlled with x in 'for loop'.

Upvotes: 1

Marco Salerno
Marco Salerno

Reputation: 5201

You need to move:

var letter = 'a' + num;
var aLetter = document.getElementById(letter);

Inside the for or their value wont be changed ^^

var num = 1;

for (var x = 0; x < 3; x++) {
    var letter = 'a' + num;
    var aLetter = document.getElementById(letter);
    alert(aLetter.innerHTML);
    num++;
}
<span class="alphStyle" id="a1">a</span>
<span class="alphStyle" id="a2">b</span>
<span class="alphStyle" id="a3">c</span>

Upvotes: 1

imprezzeb
imprezzeb

Reputation: 716

You are getting the element just once.. update your code like this.

var num = 1;
var letter;
var aLetter;

for (var x = 0; x < 10; x++) {
    letter = 'a' + num;
    aLetter = document.getElementById(letter);
    alert(aLetter.innerHTML);
    num++;
}

Upvotes: 1

Neok
Neok

Reputation: 241

You declare aLetter outside the scope.

You need to update him in with the incremented variable x.

var letter;
var aLetter;
for (var x = 0; x < 10; x++) {
    letter = 'a' + x;
    aLetter = document.getElementById(letter);
    alert(aLetter.innerHTML);
}

Upvotes: 1

Related Questions