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

JavaScript Getting Started With ES2015 Defining Variables With let and const Using let with for Loops

Nir Barzilai
Nir Barzilai
3,029 Points

In 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?

Dane Parchment
Dane Parchment
Treehouse Moderator 11,077 Points

Can 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.

4 Answers

Dane Parchment
MOD
Dane Parchment
Treehouse Moderator 11,077 Points

Ok, 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
Tomasz Grodzki
8,130 Points

Yeah, 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
PLUS
Ian Salmon
Courses Plus Student 10,687 Points

At 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
Nir Barzilai
3,029 Points

Hi 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
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?