document.getElementById(element).innerText = variable

Question

I'm trying to write a loop to improve the way I assign values to html elements on a web page.

at the moment I use....

document.getElementById("Season201516Score1").innerHTML = Game201516Score1;
document.getElementById("Season201516Score2").innerHTML = Game201516Score2;
document.getElementById("Season201516Score3").innerHTML = Game201516Score3;

and so on....

The variables are

var Game201516Score1= "L 0-2"
var Game201516Score2= "W 1-0"
var Game201516Score3= "D 2-2"

The loop i'm using is

for (var i = 1; i <= 3; ++i) 
{
element = 'Season201516Score' + i
Score = ('Game201516Score' + i)
document.getElementById(element).innerText = Score;
}

It works in so far that it puts text in the correct elements on the page but rather than the values "L 0-2", "W 1-0" or "D 2-2" it gives the text "Game201516Score1", "Game201516Score2" and "Game201516Score3".

Can someone show me what I'm doing wrong.

score 1 · Answer 1 · answered Oct 27 '15 at 10:12

1

Can you store the scores in an array? Something like this -

var Game201516Score = [];
Game201516Score[0]= "L 0-2"
Game201516Score[1]= "W 1-0"
Game201516Score[2]= "D 2-2"

for (var i = 0; i < 3; i++) 
{
   element = 'Season201516Score' + i
   document.getElementById(element).innerText = Game201516Score[i];
}

answered Oct 27 '15 at 10:12

Shreyas

1,462
9
11

Thanks Shreyas, I agree arrays are the correct way to do it, but was after a quick fix and the converting the string to variable works well for my current problem. – GazzaLDN Oct 27 '15 at 10:35

score 0 · Accepted Answer · answered Oct 27 '15 at 10:12

0

Score = ('Game201516Score' + i)

is a string and not a variable. So you are assigning that string and not the variable to the html. You need to convert the string to a variable to be able to use it first. If it's a global variable then window[Score] should give you the correct answer instead of only using Score. Else you can also use this[Score].

answered Oct 27 '15 at 10:12

Saransh Kataria

1,447
12
19

for (var i = 6; i <= 7; ++i) Thanks, thought it was something simple! { element = 'Season201516Score' + i Score = ('Game201516Score' + i) document.getElementById(element).innerText = window[Score]; } – GazzaLDN Oct 27 '15 at 10:21
@GazzaLDN yes, that should solve the problem you have, though this still is a bad practice, use arrays as suggested by Shreyas or make an object – Saransh Kataria Oct 27 '15 at 10:27
Thanks,, window[Score] works a treat. document.getElementById(element).innerText = window[Score]; } – GazzaLDN Oct 27 '15 at 10:28
Hi saranshkataria, I have upvoted your answer and Shreyas, but as I am a Newbie with a low reputation score, it doesn't show up publically yet! – GazzaLDN Oct 27 '15 at 10:40

Deepak Biswal · Answer 3 · 2015-10-27T10:26:35.913

0

eval: Change the line Score = ('Game201516Score' + i); to Score = eval('Game201516Score' + i);.

window: If eval is not works for you, then try this for above line Score = window["Game201516Score" + i];;

Hope this will be fine!

edited Oct 27 '15 at 10:26

answered Oct 27 '15 at 10:14

Deepak Biswal

4,280
2
20
37

Ack, `eval` - about the worst solution you could suggest! – Jamiec Oct 27 '15 at 10:15
eval should be avoided if possible – Saransh Kataria Oct 27 '15 at 10:16
Can you 'please explain why `eval` should avoided above code snippet? – Deepak Biswal Oct 27 '15 at 10:17
@DeepakBiswal http://stackoverflow.com/questions/86513/why-is-using-the-javascript-eval-function-a-bad-idea – Saransh Kataria Oct 27 '15 at 10:28
eval isn't always evil. There are times where it's perfectly appropriate. Anyways I have updated my answer to use `window` method. – Deepak Biswal Oct 27 '15 at 10:29

score 0 · Answer 4 · answered Oct 27 '15 at 10:15

The first thing you should do is put your variables somewhere explicit - by using var it's in current scope, which is quite possibly window but that could depend (for example, if this code is actually in a function)

window.myScores.Game201516Score1= "L 0-2"
window.myScores.Game201516Score2= "W 1-0"
window.myScores.Game201516Score3= "D 2-2"

Then your other bit of code would use square-bracket notation to access these variables

for (var i = 1; i <= 3; ++i) 
{
    element = 'Season201516Score' + i
    Score = window.myScores['Game201516Score' + i];
    document.getElementById(element).innerText = Score;
}

document.getElementById(element).innerText = variable

4 Answers4