defining a variable to output innerHTML

Question

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

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.

I don't understand what you are asking.

rlb.usa
– rlb.usa

2011-03-24 16:57:10 +00:00
Commented Mar 24, 2011 at 16:57 — rlb.usa
– rlb.usa, Commented Mar 24, 2011 at 16:57

Naftali · Accepted Answer · 2011-03-25 15:31:46Z

3

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

edited Mar 25, 2011 at 15:31

answered Mar 24, 2011 at 16:55

Naftali

147k41 gold badges247 silver badges304 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

pimvdb Over a year ago

He's actually looking as to why it works if I'm not mistaking.

Audrey Over a year ago

Thank you, Neal, for explaining. I do understand why it works, what I want to know is how do I write the code and not use a variable, in this case, "str". For example:

Naftali Over a year ago

@Audrey you need the variable or else you wont be able to save the information in the for loop unless for every instance of the loop you do:

document.getElementById("results").innerHTML = document.getElementById("results").innerHTML + i + ":" + " " + sayWhat + '<br>';

which you can do

Mike Thomsen · Accepted Answer · 2011-03-24 17:00:28Z

0

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

answered Mar 24, 2011 at 17:00

Mike Thomsen

37.7k11 gold badges63 silver badges86 bronze badges

Collectives™ on Stack Overflow

defining a variable to output innerHTML

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related