Solution: Display selected result on change - JavaScript教程

- [Instructor] In this challenge, we are given a select element in the HTML that represents a selection of TV shows. The user was instructed to select their favorite TV show. Our challenge is to display the user selection on change in the div with the ID result. The change event is fired for input, select, and text area elements when the user modifies the element's value. So in our case, they've made a selection and now, as part of this challenge, we want to display the selection in our HTML. Let's get started in our function, display message on change, on line 10. This function is passed the document as a parameter. The first thing that we'll want to do is get the select using its ID. So let's call this my favorite show select. And we're going to set it equal to document dot get element by ID. And the ID of the select was favorite dash TV show. Alright, hopefully you can see that. There we go. Alright, so now we have the select. The next thing that we want to do is we want to add the event listener to the select. So this is a little bit different than what we've done in prior challenges. Typically we've been adding the event listener on the document, but for this particular challenge, we're going to add the event listener on the select. So here on line 14, give us a little bit of space. We're going to take my favorite show select and we're going to add event listener. And this event listener that we're listening for is change. All right, so that's the first step. And then the next thing we're going to do is set up our function as we've done previously. There is a little bit different setup, though, this time. For this challenge, we're going to display what the user selects. So we're actually going to need the event information in order to display the value. So here in our listener function, we're actually going to pass event and we'll come back to this here in a second and show you how to get information that we need from this event. So the next thing that we want to do is get our div where we're going to display the result. So let's go ahead and call this result div and we're going to set it equal to document dot get element by ID. And the ID of that was result. Of that result div, this is where we're going to display our users' selection on change. And just as we've done in previous challenges, you can see in our test code that we're dispatching a change event on our favorite show select when that change happens. So it will execute our code for us and simulate that change. The next step is now to display the text content and display the user selection. So here on line 16, we need to take our result div and we need to add text content. And we know from the instructions that our text content is going to read your selection changed to and then we need to display the value that was selected. So let's go ahead. We're going to use template literals or interpolation, here, as it's sometimes called. So we have our back ticks and then we're going to write your selection, or type, rather, changed to colon and then we're going to have a space and then dollar sign curly braces. And then now we can add within these curly braces the value of the event dot target, which is going to be what the user selected from my favorite TV show select. So here we take that event that we passed in to this listener function dot target dot value. All right, and that should be all we need to get our challenge solved. So let's just do a quick recap of what we have here. So in our display message on change, we captured my favorite show select by grabbing the element by ID, which was favorite TV show. We added the event listener and the type that we're listening for here is change. We then pass the event into our listener function, got our result div, and then in the result div, we're passing in the text content your selection changed to and it's whatever the user selected. So it's actually going to be a surprise to us what the user selected here when we run this code. So let's go ahead and do that. Awesome. Great job. So you can see that you're exactly right. We have our HTML from the challenge and I'm going to slide this over so we can see the full HTML here. So we have the same select that's from our HTML. And what we did was populate the result div here and your selection changed to "Succession," which is actually my favorite TV show. So great work on this one. I know it was a little bit more challenging than some of the other ones that we've done so far. So you should be really proud of yourself. Good work.