0

我是 JavaScript 的初学者，但我无法弄清楚以下问题：我正在尝试创建一个简单的 JavaScript 游戏，它应该允许用户输入玩家的姓名。

我试图用'for'循环来解决这个问题，它会重复5次（根据用户之前的选择）。但是，当我尝试循环以下应该允许用户输入玩家姓名的代码时，它总是从 nr 开始。4 并且不再循环，而是结束。为什么呢？我怎样才能改进我的代码以使其正常工作？

for (var i=0; i<5;i++){
    document.getElementById('content').innerHTML = '<form name=players_name><p>Name of the player '+
                                                   i+
                                                   '</p><input type="text" name="player_name"></br><input type="button" value="Submit" onclick="somefunction()"></form>';
}

非常感谢

4

4 回答 4

0

使用+=运算符在每次迭代中附加 HTML：

document.getElementById('content').innerHTML += "...";

但是这样做会降低性能。相反，使用数组来收集字符串并将它们放入循环末尾的元素中：

for (var i = 0, html = []; i < 5; i++) {
    html.push( '..' );
}

document.getElementById('content') = html.join();
于 2012-12-30T19:08:13.013 回答
0

尝试使用alert()orconsole.log()看看它是否真的是你的循环，或者，如果它是你在循环体内的代码。

for (var i=0; i<5;i++){
alert(i);
document.getElementById('content').innerHTML = '<form name=players_name><p>Name of the player '+i+'</p><input type="text" name="player_name"></br><input type="button" value="Submit" onclick="somefunction()"></form>';
}

这将显示一个消息框，其中i包含每次迭代的变量值。

你也可以使用

console.log(i);

使用浏览器的调试控制台（请注意，这与 IE < 8 存在一些兼容性问题）

于 2012-12-30T19:10:13.457 回答
0

在此处输入图像描述

var content = "";                                          //create "content"
for (var i=0; i<5;i++){
    content += '...'+i+'...'+"<br>";                       //Add your HTML inside
}                                                          //¯¯¯
document.getElementById('content').innerHTML = content;    //Put it into DOM

这样innerHTML 就不会每次都被覆盖。

于 2012-12-30T19:13:20.787 回答
0

你的代码有错误。您覆盖了 id 为“content”的 HTML 元素内容的 4 倍。于是就有了答案，为什么你只看到了第四种形式。

这是固定代码：

// Make a variable what will contain the forms
var content_output = "";

for (var i=0; i<5;i++){
     content_output += '<form name=players_name><p>Name of the player ' + i + '</p><input type="text" name="player_name"></br><input type="button" value="Submit" onclick="somefunction()"></form>';
}

// Add the content_output variable's content to the HTML element width 'content' id
document.getElementById('content').innerHTML = content_output;
于 2012-12-30T19:21:37.253 回答