Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Nir Barzilai
3,029 PointsIn defining var instead let, why variable -i- gets 10 and not 9?
Hi, after complete for loop, understood that -i- goes between 0 to 9, so could you please explain why after complete for loop, ' i ' equals to 10 and not 9 when clicking on each button?
4 Answers
Dane Parchment
Treehouse Moderator 11,077 PointsOk, now that I understand your question, at the end of the loop i will be 10 because 10 is the exit condition for the loop. buttons.length = 10 and the exit condition for the loop is when i < 10 is false, namely i >= 10. So the loop will keep running and incrementing i until it reaches a value that invalidates the condition. That first value that i reaches before invalidating is 10, which is why i is equal to 10 at the end of the loop.
If you need a better explanation please let me know.
Tomasz Grodzki
8,130 PointsYeah, you are right - the exit condition is when "i" is equal to 10. But the "i" should be 10 after quitting the loop, not INSIDE the loop.
for(let i = 0; i <= buttons.length; i++) { //Here is start of the loop
const button = buttons[i];
button.addEventListener("click", function() {
alert("Button " + i + " Pressed");
});
} //Here is end the loop. As long as we are in this loop 'i' cannot be
//bigger than 9! So why this alert gives us 'i' equal to 10? - it is
//inside the loop!
console.log ( i ); //Here we are outside of loop, which means that condition is false,
//so 'i' is bigger than 9
So, why alert says that 'i' is equal to 10?
Ian Salmon
Courses Plus Student 10,687 PointsAt the start of the last loop:
i = 9
the loop runs
at the end of the loop it increments i by 1, so now i = 10
the loop does not run again since i = 10 and the condition i < 10 is false
The loop does not run when i = 10, but i is already set, so it shows 10 in each alert.
Nir Barzilai
3,029 PointsHi Dan,
Below attached the entire code for buttons.html. thanks
<html>
<head>
<title>buttons - let and Const</title>
</head>
<body>
<h1>Buttons</h1>
<button>Button 0</button>
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
<button>Button 4</button>
<button>Button 5</button>
<button>Button 6</button>
<button>Button 7</button>
<button>Button 8</button>
<button>Button 9</button>
<script>
const buttons = document.getElementsByTagName("button");
// console.log(buttons);
for(let i = 0; i < buttons.length; i++) {
const button = buttons[i];
console.log(button);
button.addEventListener("click", function() {
alert("Button " + i + " Pressed");
// console.log(button);
});
}
</script>
</body>
</html>
Edited for readability (please refer to the markdown cheatsheet to learn how to properly format code) - Dane E. Parchment Jr. (Moderator)
Roger Hwang
3,851 Points@Nir Barzilai is referring to the for loop in the video. When the for loop finishes, i = 10, then it checks whether i < buttons.length. Since it doesn't, the loop ends. It feels like i stops at 9 since we never get to see i = 10 in action. Does that make sense?
Dane Parchment
Treehouse Moderator 11,077 PointsDane Parchment
Treehouse Moderator 11,077 PointsCan you provide the code for us so that we can help you debug the code, it sounds like you probably have the loop condition wrong, but I can't tell if you don't show the code.