defining a variable to output innerHTML
I've included the HTML code to give the whole picture of what I am trying to understand.
<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 maxLo开发者_如何转开发op = 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>
How would the code be written out for this use of 'str'
str = str + i + ":" + " " + sayWhat + '<br>';
And, more especially, how would the code be written out for this use of 'str'
document.getElementById("results").innerHTML=str;
I look forward to your replies/answers. Thank you.
your code works fine, look at it here :-)
http://jsfiddle.net/maniator/s8fyQ/
The reason why it works:
This is because str is first set as an empty string, ad as you go through the loop you add on more text.
document.getElementById("results").innerHTML=str; sets the html of the element with the id=results to whatever is inside of the str variable that you set earlier
UPDATE
Instead of using str you can do:
for (var i=1; (i<=maxLoop); i++) {
document.getElementById("results").innerHTML =
document.getElementById("results").innerHTML + i
+ ":" + " " + sayWhat + '<br>';
}
If you're trying to understand why it works, it's simple.
Your code creates a new variable, adds new text to that variable in each iteration of the loop and then sets the value of innerHTML. When you set the value of innerHTML, the browser triggers a behavior which causes it to dynamically update the tag you told it (results).
加载中,请稍侯......
精彩评论