Solution: Display window dimensions on resize - JavaScript教程

- [Instructor] For our final challenge, we're going to display the height and width of the browser window in the HTML on resize. The resize event will be simulated by the window dispatch event in the test code. The resize event fires when the document view or window has been resized. Let's start with our function on line 10 display message on resize. So in this challenge, the user has resized the window so this happens quite a bit. And maybe you want to take some action because of the size of the browser or something like that. And this could be handled with CSS, but maybe there's different situations where a resize event would cause you to execute some JavaScript code here. So the first thing we want to do here in our function is to go ahead and set up our event listener. So this is a little bit different than the other challenges. And we've kind of talked about, you know, the first few we were adding the event listener to the document. In our previous challenge, we added the event listener to a specific element in the HTML. For this particular one, since we're looking at resize, we're actually going to add the event listener to window. So on line 12, I'll go ahead and get this add event listener started with window.addeventlistener. And since we are listening for the resize event, we'll pass that in as our type. And then we'll go ahead and set up our listener function. The first thing we'll want to do is just go ahead and grab those elements where we're going to display the text which is the height of the window and the width of the window. So for simplicity sake, let's call this first one for height, we'll call the variable height and document.getelementbyid. And the ID for that particular container that div was height. And then for width, we'll do the exact same thing, except that the ID there is width. Nice. So now we have our two containers where we're going to display some text. The next thing that we want to do is add the text. So for our height, we can say height.textcontent and then we're going to set that equal to the window.innerheight, so inner height and inner width which we'll get to in a second, those are the actual size of the browser and pixels. So this will be the information that we want to display to our user. So with width, we'll do text content equals window and then instead of inner height, inner width. All right. So just a quick review of what we did here. We have our function display message on resize and it takes two parameters, window and document. And we set up our add event listener on the window because we're looking for, we're listening for the user to change and resize their browser. Then we grab the elements, height and width, the elements that are tied to those IDs. And we added the text content that includes the inner height of the window and also the inner width. So let's go ahead and run our code and see how we did. Excellent job. So our test case passed. Awesome. And if we look at the output, we can see that the height of the browser window that we simulated is now 600 pixels and the width is 1000. Awesome job.