Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 10 of 10
  1. #1
    Member Reza O's Avatar
    Join Date
    Nov 2012
    Posts
    53
    Member #
    33634
    Liked
    1 times
    <!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.

  2.  

  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    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 likes this.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  4. #3
    Member Reza O's Avatar
    Join Date
    Nov 2012
    Posts
    53
    Member #
    33634
    Liked
    1 times
    That makes sense. Thanks.

  5. #4
    Member Reza O's Avatar
    Join Date
    Nov 2012
    Posts
    53
    Member #
    33634
    Liked
    1 times
    Quote 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.

  6. #5
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    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 ...)
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  7. #6
    Member Reza O's Avatar
    Join Date
    Nov 2012
    Posts
    53
    Member #
    33634
    Liked
    1 times
    Quote 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

  8. #7
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    Starting to see a trend

  9. #8
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    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.
    Reza O likes this.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  10. #9
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Quote 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 likes this.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  11. #10
    Member Reza O's Avatar
    Join Date
    Nov 2012
    Posts
    53
    Member #
    33634
    Liked
    1 times
    Thanks again.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 03:02 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com