hiimrann

It's alright, I worked it out with a little help. If anyone's wondering, the answer is in the following line of code: p.innerHTML = "i: " + i + "<br>" + p.innerHTML; I'll explain it with two iterations, in four steps each. Hopefully I got it right, and explained it in non-nerd well lol. [Iteration 1] Step 1. When i = 10, the browser prints the following in the <p> tag: i: 10 <br> Step 2. p.innerHTML (right of the = operator) is empty for now, hence, nothing happens on the screen in this step. Step 3. The printed line (i: 10 <br>) is assigned to p.innerHTML (left of the = operator). Step 4. i is decremented by -1, and now i = 9. [Iteration 2] Step 1. i = 9, and the browser FIRST prints the following in the <p> tag: i: 9 <br> Step 2. p.innerHTML (right of the = operator), which is now i: 10 <br>, is added after i: 9 <br>, and the browser NOW displays i: 9 <br>i:10 <br>. Step 3. The printed line (i: 9 <br>i:10 <br>) is assigned to p.innerHTML (left of the = operator). Step 3. i is decremented by -1, and now i = 8.

I expect the browser to print the values from 10 to 1 in an empty p tag using JavaScript, but it's printing 1 to 10. Why does it print above the old line, and not below it? <!-- Button for printing "i" --> <input type="button" value="print i"> <!-- Empty p tag where the values of "i" will be printed --> <p></p> <script> // Function for printing "i" function print() { var i = 10; while(i > 0) { // Grabs the empty p tag var p = document.getElementsByTagName("p")[0]; // Prints the values of "i" on the p tag p.innerHTML = "i: " + i + "<br>" + p.innerHTML; i = i -1; } } // Calls the function for printing "i" document.getElementsByTagName("input")[0].onclick=function() { print(); } </script> test-standalone.html