Question

我已经包含了HTML代码，以全面了解我想要了解的内容。

<html>
<head>
<title>Echo App</title>

</head>
<body>
<p>Echo</p>
<p>Say what? <input id="sayThis" size="40" /></p>
<p>How many times? 
<select id="howMany">
<option value="1">1</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
</select></p>

<p><button onClick="doLoop()">Do it!</button></p>
<p><div id="results"></div></p>
<script type="text/javascript" language="javascript">

function doLoop() {

var sayWhat = document.getElementById("sayThis").value;
var maxLoop = document.getElementById("howMany").value;

var str = ""; // where we'll store our output temporarily
for (var i=1; (i<=maxLoop); i++) {
    str = str + i + ":" + " " + sayWhat + '<br>';

}

document.getElementById("results").innerHTML=str;
}
</script>
</body>
</html>

如何使用'str'

编写代码

str = str + i + ":" + " " + sayWhat + '<br>';

而且，更具体地说，如何使用'str'

来编写代码

document.getElementById("results").innerHTML=str;

我期待您的回复/答案。谢谢。

Answer 1

你的代码工作正常，请看这里： - ）

http://jsfiddle.net/maniator/s8fyQ/

原因为何起作用：
这是因为str首先设置为空字符串，广告在您浏览更多文字时添加的循环。
document.getElementById("results").innerHTML=str;将带有id=results的元素的html设置为您之前设置的str变量内的任何内容

<强>更新

您可以执行以下操作，而不是使用str：

   for (var i=1; (i<=maxLoop); i++) {
        document.getElementById("results").innerHTML = 
            document.getElementById("results").innerHTML + i
                + ":" + " " + sayWhat + '<br>';
    }

Answer 2

如果你想了解它的工作原理，那很简单。

您的代码创建一个新变量，在循环的每次迭代中向该变量添加新文本，然后设置innerHTML的值。当您设置innerHTML的值时，浏览器会触发一个行为，导致它动态更新您告诉它的标记（结果）。

定义一个输出innerHTML的变量

2 个答案: