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 9,738 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 9,738 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
2,821 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?

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,848 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?

Ian Salmon
PRO
Ian Salmon
Pro Student 10,662 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.