Launch countdown active learning question

MDN Learn
#1

I’m trying to figure out the launch countdown active learning puzzle in the tutorial docs.
(https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code)

Here’s the solution it gives me:

const output = document.querySelector(’.output’);
output.innerHTML = ‘’;

let i = 10;

while(i >= 0) {
let para = document.createElement(‘p’);
if(i === 10) {
para.textContent = 'Countdown ’ + i;
} else if(i === 0) {
para.textContent = ‘Blast off!’;
} else {
para.textContent = i;
}

output.appendChild(para);

i–;
}

My question is, if I move “let para = document.createElement(‘p’);” above and out of the loop, it just displays “Blast Off!”
But I’m not sure why that’s happening.

In my head, once the para variable is defined, the loop will just write over it with para.textContent, and that will be appended to output with each loop. I’m not sure why it has to be defined within the loop?

#2

Hello @jacob1

last statement in the while loop should be i-- not i–

when it defined inside the loop that mean each iteration a variable will be created then you set it’s textContent to countdown or i or blast
then you append it to the output element

hope that help and have a nice day :slight_smile:

#3

Hey @justsomeone thank you for your help!

I’m still confused - why does it matter if the value is defined outside vs inside - even if it’s defined outside won’t it be overwritten by the loop anyway?

#4

you welcome @jacob1

it depend on the case you need it

when you define it inside the loop then you have 10 para element if you define it outside you have only 1 para element

#5

@jacob1 another way to check that

right click on the result area then inspect you will see the html pane include 10 p element when the para inside the loop and if you move it outside the loop there will be only 1 p element inside the div element

hope that help and have a nice day :slight_smile:

1 Like