document.getElementById(元素).innerText = 变量

Question

我正在尝试编写一个循环来改进我为网页上的 html 元素赋值的方式。

目前我在用....

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

等等....

变量是

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

我使用的循环是

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

到目前为止，它的工作原理是将文本放在页面上的正确元素中，而不是值“L 0-2”、“W 1-0”或“D 2-2”给出文本“Game201516Score1”、“Game201516Score2”和“Game201516Score3”。

谁能告诉我哪里做错了。

Answer 1

你能把分数存储在数组中吗？像这样 -

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];
}

Answer 2

Score = ('Game201516Score' + i)

是字符串，不是变量。因此，您将那个字符串而不是变量分配给 html。您需要先将字符串转换为变量才能使用它。如果它是一个全局变量，那么 window[Score] 应该会给你正确的答案，而不是只使用分数。否则你也可以使用 this[Score].

Answer 3

eval：将行 Score = ('Game201516Score' + i); 更改为 Score = eval('Game201516Score' + i);。

window：如果 eval 不适合您，请尝试上面的行 Score = window["Game201516Score" + i];;

希望一切顺利！

Answer 4

你应该做的第一件事是把你的变量明确地放在某个地方 - 通过使用 var 它在当前范围内，这很可能 window 但这可能取决于（例如，如果这段代码实际上是在一个函数中）

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

然后您的其他代码将使用方括号表示法来访问这些变量

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

document.getElementById(元素).innerText = 变量

document.getElementById(element).innerText = variable

javascript

dom

for-loop

getelementbyid

innertext