Adding Choice Buttons Solution

[00:00:00]
>> So, how could we do this? There's lots of ways as usual, but one of the things we need to do is we need to do something for every choice in choicesArray. So that means we're gonna need some kind of loop. So what kinds of loops do we have?

[00:00:19]
What would you reach for here, what's your instinct?
>> For of?
>> For of, that sounds great. For of lets us loop over an array and take out every item in it. And in this case, we have a choicesArray that we're gonna get passed into this function. So named is the parameter.

[00:00:41]
We're assuming we're gonna pass this in. And if we look at how renderButtons is being called, it's going to receive an array of choices and then the correct answer. So we're gonna loop over the choices. The choicesArray is what it's called inside of this function, that's the name of the parameter.

[00:00:56]
Okay, do you wanna walk me through declaring a for loop, just the structure of the for loop?
>> For parentheses, let choice of choicesArray and then curly brackets.
>> Awesome, okay, so now this is gonna execute for everything in our choicesArray. Which we're probably gonna have three things cuz that's what we had put in here, but maybe we could change it later to be five or whatever.

[00:01:19]
Okay, so the first thing we need to do is create a button element. And we said we can do that, how?
>> CreateElement.
>> CreateElement, which is a method on which object?
>> Document.
>> Document, beautiful, okay? So document.createElement, and it's gonna be of type uptag button. And then we wanna capture this element so that we can do stuff with it.

[00:01:43]
So I'm just gonna say const button, yeah? Then we're gonna do some stuff to the button. What we need to do is set some properties on this button namely, the name, the value, and the text content. So how can we do that? We know how to set properties by this point?

[00:02:10]
>> Button.setProperty.
>> Button?
>> Dot.
>> Dot?
>> SetProperty, or setAttribute.
>> So if you use setAttribute on, yes, we could use setAttribute if we wanted to. But actually since we have this, this is gonna be like JavaScript object representation of this element.
>> I think you just assign whatever value, right, after the period?

[00:02:31]
>> We can actually use the period, right, to do like, remember textContent is something we've worked with a lot. We've done .textContent= several times. So that's one thing we can do. And what we want this to be is the value of that choice. So in our for loop, what variable refers to the value of the choice?

[00:02:50]
>> Choice, yeah?
>> Not a trick question.. Okay, so we set the textContent and we wanna do the value and the name also. And so we can do just like button.value = choice; button.name = choice. And there's even a trickier shorter syntax, you can see in the finished example on the site.

[00:03:15]
But doesn't matter, this is totally valid. So we're setting the textContent, we're setting the value which, remember, is gonna be often used in event handlers like when we do event.target.value. So we need that, that's important. And then we're also setting the name, which I think is just best practice.

[00:03:34]
Okay, now we need to attach a click listener, a click event listener. How do we do that?
>> Button.addEventListener?
>> Button., more louder?
>> addEventListener.
>> addEventListener, great.
>> And what do we pass into EventListener?
>> Click.
>> Click.
>> Click, yes, exactly. And what else?
>> Callback function?

[00:04:02]
>> A function, a callback function that's going to be called when this click happens. Now, we didn't have to write it ourselves because it was already written for us. It's very similar to the one we did on our previous quiz, just a little bit fancier, it's called button handler.

[00:04:15]
So we're gonna just pass that in, And that represents the whole function. So we're not calling the function, we're not saying call buttonHandler and return its value. We're just saying, we want the function buttonHandler to be passed in as the callback here. Okay, great. Now, we need to append the button, As a child or add the button as a child to the options element which we have up here, which is like a little div container for it.

[00:04:54]
>> AddChild elements?
>> If we need to double check, like how do we add a child? AddChild, it's not called add. Let's say, child, we have something called appendChild, so this is going to add a node to the end of list of children. So let's try options.appendChild, what?

[00:05:22]
>> Button?
>> Button, that's our element. The element that we created all those many lines ago.
>> You can push into the options cuz it's not an array obviously?
>> Options is actually an element, an HTML element, I should say, as opposed to an array.
>> You can't push it into an element?

[00:05:42]
>> So we can double check if we have element.push. No, but we do have node, in this case node. I've been hand waving about nodes versus elements. You can read about it on MDN. But in this case, appendChild should work. And I think that is all the things that I wanted us to do as far as the comment nose.

[00:06:09]
So let's save, great, and maybe let's just try out this loop and just double check that it's adding something. Of course, we're gonna have to do a lot of other things like get choicesArray and grab and options elements, so you know what? Let's press on, I feel confident, for the interest of time, we'll press on.

[00:06:30]
But what you could do is, again, you can't access stuff like options here for multiple reasons. One, it's inside of a function, so that means it's local to the function scope. But two, we said we can't really pull out the values in this, which is because it is a module, which we'll talk about later.