Two questions in the following script

**Reza O** · Dec 05th, 2012, 07:00 AM

<!DOCTYPE html>
<html>
<body>

<p>Click the button to loop through a block of code five times.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>

<script>
function myFunction()
{
var x="";
for (var i=0;i<5;i++)
{
x=x + "The number is " + i +"<br>";
}
document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

1- The document.getElementById("demo").innerHTML=x; is outisde the loop. So why does it show 5 values instead of one?
2- The result is:
The number is 0
The number is 1
The number is 2
The number is 3
The number is 4

But why? After x="The number is 0 "<br>"" the next value of x should be "The number is 0 "<br>"The number is 1 "<br>". And it should keep adding each line to it. Why is it considering x="" everytime the loop is run. The var x="" is outside the loop?

Please help...very confused here by these two problems.

**Web Design Forums** · Dec 05th, 2012 07:00 AM

**TheGAME1264** · Dec 05th, 2012, 08:13 AM

The answer to both is that it's because both x and the document.getElementById reference are outside the loop. The loop runs five times, takes the outside variable x, and adds the line to it each time. It doesn't replace the line...it adds the line. That's what the x = x + part does. If you only want one line (the last one), then remove the "x + " part....or put the document.getElementById line inside of the loop.

It's doing exactly what it's supposed to do...it's concatenating the line each time through and outputting all five lines at the end.

**Reza O** · Dec 05th, 2012, 08:16 AM

That makes sense. Thanks.

**Reza O** · Dec 06th, 2012, 01:15 AM

Originally Posted by TheGAME1264, post: 244913

The answer to both is that it's because both x and the document.getElementById reference are outside the loop. The loop runs five times, takes the outside variable x, and adds the line to it each time. It doesn't replace the line...it adds the line. That's what the x = x + part does. If you only want one line (the last one), then remove the "x + " part....or put the document.getElementById line inside of the loop.

It's doing exactly what it's supposed to do...it's concatenating the line each time through and outputting all five lines at the end.

I have another issue with the following code that has the document.getElementById("demo").innerHTML=x; IN THE LOOP.

<!DOCTYPE html>
<html>
<body>

<p>Click the button to loop through a block of code five times.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>

<script>
function myFunction()
{
var x="";
for (var i=0;i<5;i++)
{
x=x + "The number is " + i +"<br>";

document.getElementById("demo").innerHTML=x; }

}
</script>

</body>
</html>

1- The result is:
The number is 0
The number is 1
The number is 2
The number is 3
The number is 4

But why? After x="The number is 0 "<br>"" the next value of x should be "The number is 0 "<br>"The number is 1 "<br>". And it should keep adding each line to it. Why is it considering x="" everytime the loop is run. The var x="" is outside the loop?

So it's a twist off of the first problem. Thanks in advance for your response.

**TheGAME1264** · Dec 06th, 2012, 05:59 AM

Wait...are you asking why the quotes aren't included?

They're not included because they're indicating strings. If you want the actual quotes, you can either enclose your strings in single quotes and add the double quotes (e.g. ' "The number is ' + i ...) or use the escape character to get your double quotes (e.g. "\"The number is " + i ...)

**Reza O** · Dec 07th, 2012, 01:13 AM

Originally Posted by TheGAME1264, post: 244957

Wait...are you asking why the quotes aren't included?

They're not included because they're indicating strings. If you want the actual quotes, you can either enclose your strings in single quotes and add the double quotes (e.g. ' "The number is ' + i ...) or use the escape character to get your double quotes (e.g. "\"The number is " + i ...)

No I am asking why the answer isnt the following:

The number is 0
The number is 0
The number is 1
The number is 0
The number is 1
The number is 2
The number is 0
The number is 1
The number is 2
The number is 3
The number is 0
The number is 1
The number is 2
The number is 3
The number is 4

**Webzarus** · Dec 07th, 2012, 05:27 AM

Starting to see a trend

**TheGAME1264** · Dec 07th, 2012, 05:42 AM

Because every time you invoke the document.getElementById line, you're setting its innerHTML to the variable...you're not adding to it.

If you said document.getElementById("demo").innerHTML += x , different story.

**TheGAME1264** · Dec 07th, 2012, 05:43 AM

Originally Posted by Webzarus, post: 245015

Starting to see a trend

So am I, but the thing is that others may have similar questions.

**Reza O** · Dec 09th, 2012, 05:41 AM

Thanks again.

Thread: Two questions in the following script

LinkBack

Thread Tools

Search Thread

Display

Remove Ads

Posting Permissions