Question

我是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>';
}

非常感谢

Answer 1

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

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

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

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

document.getElementById('content') = html.join();

Answer 2

尝试使用alert()或console.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＆lt; 8有一些兼容性问题）

Answer 3

<子> enter image description here

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不会每次都被覆盖。

Answer 4

您的代码有误。您使用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;

for循环根本不循环（JavaScript）

4 个答案: