Undesired output in Javascript While loop

Question

I get output of below code as n = 3, x = 6 but I require output as

n = 1, x = 1
n = 2, x = 3
n = 3, x = 6

Can some one help me what else should be added in code?

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>

    function myFunction() {
        var n = 0;
        var x = 0;
        while (n < 3) {
            n++;
            x += n;
        }
        document.getElementById("demo").innerHTML = "n = " + n + ", " + "x = " + x;
    }

</script>

</body>
</html>

@Jai Below example is similar,

function myFunction() {
    var text = "";
    var i = 0;
    while (i < 10) {
        text += "<br>The number is " + i;
        i++;
    }
    document.getElementById("demo").innerHTML = text;
}

output is

The number is 0  
 The number is 1
  ...

If any response help you, you should accept the answer, meta.stackexchange.com/questions/5234/… . ;) I see that another questions that you made, you don't accept any answer, and maybe you are new here. — PRVS
– PRVS, Commented Feb 16, 2016 at 9:26

PRVS · Accepted Answer · 2016-02-16 09:04:24Z

2

function myFunction() {
    var n = 0;
    var x = 0;
    while (n < 3) {
        n++;
        x += n;

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

}

You have to "add" to inner html. So, put "+=" and inside the loop.

answered Feb 16, 2016 at 9:04

PRVS

1,7006 gold badges40 silver badges75 bronze badges

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

Comments

Jai · Accepted Answer · 2016-02-16 09:04:35Z

1

Concatenate the innerHTML and put it in loop:

document.getElementById("demo").innerHTML += 
"n = " + n + ", " + "x = " + x;

} // <---end of while

answered Feb 16, 2016 at 9:04

Jai

74.8k12 gold badges77 silver badges104 bronze badges

4 Comments

Mihir Over a year ago

can you help me understand why are we concatenating innerHTML because other examples I went through had document.getElementById outside while loop. Can I paste the link to example here?

Jai Over a year ago

@Mihir its because innerHTML replaces all the existing contents of that element. But adding new content with existing contents should be done with +=.

Mihir Over a year ago

I have added another example in my first post but concatenation is not used there. am not able to relate whether both scenarios referred are different?

Jai Over a year ago

That is another way via defining a variable text to store the result and when loop exits all the appended values set via innerHTML. and in this case you don't have to put innerHTML inside of loop.

Ethan Fischer · Accepted Answer · 2016-02-16 09:05:35Z

0

Your code executes the while loop 3 times, updating the values of n and x each time. But because you write the output outside of the while loop, you only see the last values. You need to put a line that displays your variables INSIDE the while loop.

answered Feb 16, 2016 at 9:05

Ethan Fischer

1,5592 gold badges21 silver badges33 bronze badges

Collectives™ on Stack Overflow

Undesired output in Javascript While loop

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related