In the examples folder, open up the troubleshooting sub folder. And let's look at troubleshooting example one. So here I'm going to iterate over all of the salespeople list items. And I'm doing it in kind of a kind of an old school way. And then I'm creating an AI variable and setting a reference to the sale, the list items or the list of salespeople, DOM elements by using the dot document, query selector all it's not particularly fancy, but there's a reason why I'm doing it this way. So I create a for loop, which is again, just kind of a really old school way of iterating something and inside that for loop on looking for the Create a reference to the salesperson, so I say var item equals salesperson eyes.

So first is going to be salesperson zero, salesperson, one, salesperson, two, and so forth. And then I'm saying item, find that the select button so find a select button for that item, and then I set up a click event handler for that item. So in the And the user clicks that Select button. I'm going to use this find variable as item variable to find the D Select button and show it. I'm going to first hide the select button, show the dislike button and toggle the selected class. So let's see how we make out here.

I'm going to go to show examples and go to troubleshooting sample number one. Okay, so run that code, and then I click the first this first select button. So the diesel let's delete Select button shows the selected the select button that I clicked one away. But I'm not seeing the D Select button for each list item and it's not toggling the selected class or the list is not turning green as I expected. So if we zoom out a little bit, I want to show you something really odd that's happening here. As I watch what happens I click each Select button.

The last list item is toggling it's going green and then not green, green and then not green. So for some reason, every time we click a select button, a, we're having a couple of problems. And the main problem is that we're not seeing the D Select button for that item. And the last element in the list is toggling, which is not what we want. We want the item that we're clicking to be toggling. So let's see if we can figure out the problem.

Well, the first question we need to ask ourself is, is this a scope problem or a context problem? always the most important question. So I'm thinking about things and I'm thinking well, the funky thing that was happening was the last element in the list was toggling, but none of the other ones were and I'm iterating over a list and I'm using a variable that counts up. I started zero and it goes up to the value of salespeople dot length are tells you all that length minus one. So I'm thinking that Well, if the last one, if AI is incrementing, and only the last element is toggling, then maybe there's a problem with AI and AI is, is variable, that's for sure. So when I think variables, I think scope.

So why don't we do this? Let's put a console a console statement inside a click event handler, which is going to output the value of i. So I'm thinking that on each click, I should show like if I click the very first element in the list, I should see, you know, I equals zero. If I click the second element, I should see i equals one. If I click the ninth element, I should see i equals nine, and so forth. Because this click event handler is referencing you know, I, we created this item object by referencing salespeople eyes, so we definitely need to know that we're getting the correct value of i for each.

Click. So let's refresh the page and see how we make out so I'm going to start clicking And when I click each button, I noticed that it just says i equals 10. Every time I equals 10, I'm thinking it should say i equals zero, I equals one, I equals two equals three, but it's just I equal 10. And it kind of lines up with what we're seeing, which is, the last item in the list is toggling, not the item we're clicking with the last item in the list. So I'm thinking that AI is not what we think it is. And it turns out that's correct.

Because what happens is, even though we're, we're iterating over i going from zero to nine, the problem is that this click event handler could happen. You know, the iteration happens in, you know, microseconds, but milliseconds, but the click event handler, the user might click the button in a minute or 10 minutes or 10 hours. But that reference to AI does not is not cached with each iteration of this list. It they all find are off and when you start clicking the clicking the buttons is 10. So we need a way to protect it or create a scoped version of it. So if we go back to the page and run troubleshooting example, number two, and start clicking around, I think you'll notice that everything works exactly as expected.

If you click an element, the the select button shows and it toggles green. And the last element only behaves that way. If you click it, so we're getting the behavior that we expected. The question is why? Well, the reason that happened is because if you look at troubleshooting example two, what we did was we used an immediate invoked function expression, or an immediate function here, and we we get this item. And we pass it into the function.

And then we have our code. So basically, our code gets a privately scoped version of that item. And that's preserves that when the element the select button is actually clicked. We've got Zero I one, I two, I three. Now, I don't want to get really too much into immediate functions and closures, because that's definitely stuff that we could have an entire class on. But the point I'm making here is that we asked ourselves the question, is this a scope problem or a context problem?

And through a little bit of logic, we determined it was a scope problem. And that allowed us to quickly drill down and figure out where the problem was happening, and how to solve it. Even if we didn't have the answer of how to solve it right now, at least finding out what the problem is. It wasn't a context problem. It was a scope problem. And that's the thing that's really important in this case was determining that For this example, this was a scope problem, and it was solved by creating the properly scoped version of I or this item object that we wanted to pass into our click event handler.