Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Mar 2011
    Location
    Pakistan
    Posts
    86
    Thanks
    20
    Thanked 0 Times in 0 Posts

    Simple For Loop Question

    @ http://jsfiddle.net/defencedog/rrKYW/

    A recent observation has deeply embezzled my knowledge of js. Look at the code below:

    Code:
    var x = "";
    
    function postbody() {
        for (i = 0; i < 5; i++) {
            x = x + "<sup>" + i + "</sup><br/>";
            document.getElementById("posti").innerHTML = x;
        }
    
    }​
    The above code's output is similar to that of the following & that is the thing vague to me

    Code:
    var x = "";
    
    function postbody() {
        for (i = 0; i < 5; i++) {
            x = x + "<sup>" + i + "</sup><br/>";
    
        }
      document.getElementById("posti").innerHTML = x;
    }​
    the latter code must giv me a single (to be concise last value of x) output & not the whole iterated output?

  • #2
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    Correct. The first one will add line after line as it iterates, each line becoming longer. The second one will post only the value of the last iteration.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,603
    Thanks
    80
    Thanked 4,634 Times in 4,596 Posts
    Ummm...yes and no.

    The final result of both sets of code will be the same!

    In the first case, there are repeated assignments to the innerHTML of "posti", but each one simply OVERWRITES the prior one.

    So, in the end, ONLY the LAST value of x will be assigned to the innerHTML and the results are thus identical.

    The bigger problem, here, is that the variable x is initialized BEFORE the function is invoked. Because of that, each time the function is called, ANOTHER FULL SET of the values from 1 to 5 is appended to x and thus will appear in the innerHTML.

    *PROBABLY* the initialization of x needs to be moved INSIDE the function.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,308
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    Quote Originally Posted by Old Pedant View Post
    Ummm...yes and no.

    The final result of both sets of code will be the same!

    In the first case, there are repeated assignments to the innerHTML of "posti", but each one simply OVERWRITES the prior one.

    So, in the end, ONLY the LAST value of x will be assigned to the innerHTML and the results are thus identical.

    The bigger problem, here, is that the variable x is initialized BEFORE the function is invoked. Because of that, each time the function is called, ANOTHER FULL SET of the values from 1 to 5 is appended to x and thus will appear in the innerHTML.

    *PROBABLY* the initialization of x needs to be moved INSIDE the function.
    No, the results are indeed the same but the first one keeps overwriting with the updated innerHTML of posti while the second code does it only once.

    In both cases the result is

    0
    1
    2
    3
    4

    It makes no difference here whether x is declared inside or outside the function.

    If you want only the final value of x then delete the red

    x = x + "<sup>" + i + "</sup><br/>";

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    New Coder
    Join Date
    Mar 2011
    Location
    Pakistan
    Posts
    86
    Thanks
    20
    Thanked 0 Times in 0 Posts
    Ah! thank you guys so it seems background working is indeed what I was taught but I was confused by the similar output, so it means the latter example is indeed the optimised one why updating when when I need only the last output


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •