My solution lacks understanding of the while loop. Can any one review my script and offer tips for better understanding and possibly, tips on writing better questions for help?
<script type="text/javascript">
var output = document.getElementById('output');
var para = document.querySelector('p');
var info = "Countdown ";
var i = 10; // intializer
while (i > 0) { // final-condition
// var info = 'Countdown '
info += i;
output.appendChild(para);
para.textContent = info;
// info.textContent = info + '';
output.insertAdjacentHTML('beforeend', '<br>')
console.log('Countdown ' + i);
i--; // final-expression
}
Thi
if (i === 0) {
info = "Blast off!"
output.appendChild(para)
para.textContent = info;
console.log("Blast off!");
}
</script>
var output = document.querySelector('.output');
var para = document.createElement('p');
output.appendChild(para);
para.textContent = "Countdown";
var i = 10; // intializer
while (i >= 0) { // final-condition
para = document.createElement('p')
output.appendChild(para);
para.textContent = i;
console.log('Countdown ' + i);
i--; // final-expression
}
if (i === 0 || i < 0) {
info = "Blast off!"
output.appendChild(para)
para.textContent = info;
console.log("Blast off!");
}
I think the link to the final solution is wrong. Would you mind double checking this?
Just a quick recommendation from my side, even though Iâm usually not involved in this. However, I just felt like doing a code review
If Discourse didnât screw up with the formatting, I think the indentation is not quite correct on the last if (looks way better than the first iteration though!). The last paranthis should be on the same level as the âifâ and you could get rid of the two empty lines between. The same goes with the first empty line in the âwhileâ. These are minor things, but make it way easier to understand the code quicker by developers working on the same code base.
Now letâs look at the code itself and the logic. Iâm not aware of the assignment, but I think this is a counter that changes and counts down on every line, right? If my assumption is true, I have the following feedback:
As para is a variable holding the first âCountdownâ textContent, Iâd suggest to use a new variable in the while to not override it. As it is, there is no sideeffect, but with a more complex task you might assume that the para variable is still what you assigned it to be
I think it might be faster (just a few ms or less) to set the .textContent before you append it to the output (would need to test this with a few million iterations) but Iâm quite sure. This way the browser doesnât need to render the whole thing again after adding it to the DOM. However, there might be engine optimizations exactly for that.
You donât need the if statement below the while. You will be within the while loop as long as i>=0 holds true. Once that is not the case anymore (i=-1) the while loop is left and the other code gets executed. The i === 0 check will never hold true as it will always be -1. So you can leave out the whole check.
Itâs nice to save the âBlast offâ text in a variable, however that needs to be done with care. Any variable assignment that doesnât have a âvarâ in front of it, is assigned to the global scope. This means that you would potentially overwrite any âinfoâ variable that exists on the website, including any browser-provided variables there are on the âwindowâ object. This could also be a, uncareful written, variable from another framework your website uses. More info
Happy to help further, I was looking for a possibility to improve my code reviewing skills
Thanks, @mkohler for responding to @kaotikus. Chris is out until next week, so Iâm glad someone else is responding
This assignment is part of the Looping code tutorial. The âOpen in jsfiddleâ button uses a macro to send the code to jsfiddle, which the link @kaotikus used didnât include. You can see the suggested solution by clicking the âShow solutionâ button below the âstarterâ code.
@kaotikus: Youâre doing great just by realizing that you donât understand something! The next step might be to try to describe whatâs different between the suggested solution and your code. For example, âI donât understand why I have an extra if block, but I needed it to make the output look right.â Sometimes, just putting it into words is enough to make a lightbulb turn on in your head (like with the placement of the para statement). And if not, at least youâve expressed more precisely what youâre confused about.
I am back from vacation now. Thanks for diving into this, @mkohler and @jswisher !
@kaotikus, let me know if you still have any confusion about the provided solution. There are always multiple right answers, so my solution is not necessarily the only one!
Iâm working through loops in MDN and have seen the solution to this task - which makes sense to me, however my attempt gets stuck in a continues loop and crashes the browser and I was hoping someone could read it and point out why this happens and why my attempt doesnât get the desired outcome? My code is as follows:
let output = document.querySelector(â.outputâ);
output.innerHTML = ââ;
for (let i = 10;i > 0; iâ) {
if (i = 10) {
const para = document.createElement(âpâ);
para.textContent = âCountdown 10â ;
output.appendChild(para);
} else if (i = 0){
const para = document.createElement(âpâ);
para.textContent = âBlast off!â ;
output.appendChild(para);
} else {
const para = document.createElement(âpâ);
para.textContent = i ;
output.appendChild(para);
}
}
Iâve now amended my code so the the exit condition within the for loop is i > -1 and it works fine, although Iâm using a for loop instead of a while loop in the pre-built solution. Iâm just wondering what the benefit of using a while loop over a for loop us in this particular scenario? My updated code is below:
let output = document.querySelector(â.outputâ);
output.innerHTML = ââ;
for (let i = 10;i > -1; iâ) {
if (i === 10) {
const para = document.createElement(âpâ);
para.textContent = 'Countdown â + i ;
output.appendChild(para);
} else if (i === 0){
const para = document.createElement(âpâ);
para.textContent = âBlast off!â ;
output.appendChild(para);
} else {
const para = document.createElement(âpâ);
para.textContent = i ;
output.appendChild(para);
}
}