Let's take a look at the solution to this case. If you haven't given it a try and try to debug a few of these things, I would take a minute, pause the video, get in there and give it a try. All right. So with that said, basically what we're seeing here is for the manufacturer and the model drop-down, the drop-down is broken, it's probably what we hear from a user. What's happening is, no matter what we pick here, it's just hiding everything. So let's just start with the manufacturer drop-down and select part of this code that's probably a one thing at a time case. We have this code, we know how it works. I think what might be in order here, is a console statement, let's instrument some observation because what we expect to have happen is that when we select Acme, we should see at least this one, right? Because we know that unlike these other ones that has the manufacturer Acme, but what's actually happening is they all get hidden. So we need to instrument some observation, look at the tension between what we expect to have happened given the state of the code and what's actually happening. I just pasted this end because that'd be boring for you to watch me type it, console.log just this text selected is whatever the user input is that we got up here from the drop-down, and found, is this. Which again, this is like whatever item the loop that this each thing implements is looking at, the attribute of mfg which is looking for just a tag that says mfg up in the HTML opening tag for the div. So here's a console statement, it's broken but at least we can see what it's doing and look at the tension. So I'm going to clear this because I was horsing around in there, and let's run the same test, we're going to select Acme. This is interesting. So selective manufacturer Acme, that's the user inputs, so that's okay, it's getting that. Selected as Acme got that and found is undefined. So what that tells us is and found is, tells us that this statement where whatever item div in this case, I've typed catalog part, each function is looking at, this is returning undefined. So we've narrowed down what the issue is. I think my next step is to go and make sure that this attribute is up in the HTML. Is what I'm going to do next. So if I look at one of these div, I see class, I see mfr model. Wait a minute. It's mfr that I used to declare that property not mfg. So I'm going to change this back to mfr, the log statement and more importantly, the control statement. Did I do that everywhere? I think I did, yes. Now, critically I'm going to run this code so that this is what's working, and let's just repeat our tests. Will clear the console to make everything a little clear. Behold, it works. That was our problem. So one down, one to go. Now we've got to figure out, let's test, maybe this somehow magically fixed everything. No. Looks like the model one is still broken. Done it. But that's just more fun analytical debugging that we can go in and do. Let's just see if we made the exact same mistake, because just from a human nature perspective, that seems like a good guess, a good hypothesis to test. So select model equals all. We know that selected model is coming in okay because we can see that down here in the console. Catalog part that each, if this dot attribute model is equal to select a model, let's just go see. Did we put model? Yes. Model is up there. So why don't we go in and why don't we put in the same statement and adapt it to tell us about model. Model, selected model. Yes. Since we think we're good here, why don't we comment this out up here, for minimizing the output we're looking at. We'll run this, and let's try that model filter again. Selected model is sniggler. Wait a minute, I thought I selected too cool. Selected model sniggler and found is too cool too hot. Those look like the right attributes. So the found part, is that working? For instance is the very last div, does it have model equal to too hot? So we can make sure that's working right. Yes, it does. So let's see. It's getting the right input and the right selected, and it's finding the attribute but something still doesn't make sense. Why do they all say sniggler? Why do they say sniggler, I selected too cool? So selected is sniggler. That just seems wrong. Let's go look at the drop-down box and see maybe there's something wrong there. That seems like a good thing to do. Do you see a problem? I see a problem here. It looks like I did a copy and paste error, where this has the same values as this type thing down here. So this is this thing where the select element has both a label, which is this white thing over here and a value that it's going to pass to the code over here. So even though these labels look okay, the values that it's passing over are actually wrong. So let's just pop these, let's just fix these, pop them in over here. So it seems like that was not good. So I'm going to run this to make sure we're running the right code. Now I'm going to take a model, will try too cool. Selected is too cool and fun is too hot. Just write selected model. Yes, this looks good, and we only have three of these because one of them actually matched and so the control statement didn't run and this is working as expected. So we're the same symptom for both of these but different causes in fact, and so we asked, what do we expect to have happened exactly? What do we want to have happened? What do we expect the code to do? What do we expect to happen with regard to the code? Then we had instruments some observation with these console statements to look at the tension between those two things. All right. That is some analytical debugging practice. I hope this will help you code JavaScript with confidence and in a more analytical consistent constant approach to building your code.
