defining a variable to output innerHTML_问答_开发者

开发者 https://www.devze.com 2023-02-19 07:04 出处：网络

I\'ve included the HTML code to give the whole picture of what I am trying to understand. <html>

相关专题：javascript

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).