If all is well, proceed to the next lesson.Ĭopyright © 2005-2021 by University of Washington. Share your web page with your instructor. Also make sure the button text changes from "Show clock" to "Hide clock" as appropriate.
Test your web page, and make sure you can show and hide the clock with the new button. While you're switching the clock's display back and forth from "block" to "none", you're also changing the text (innerHTML) on the clock button, so that alternates between "Show clock" and "Hide clock", depending on the current display state of the clock. If the clock is already hidden, you change the display to "block" to make it visible again. If the display is currently set to "block", the clock is visible, so you change the display to "none", which hides the clock. In this new toggleClock() function, your are using JavaScript to retrieve the clock element, get the current value of its display style, then checking it. now toggle the clock and the button text, depending on current state Var clockButton = document.getElementById('clockButton') also get the clock button, so we can change what it says get the current value of the clock's display property Var m圜lock = document.getElementById('clock') Here's that function - just add it to the existing script section in the head of your web page: Now that you have a button that, when clicked, calls the toggleClock() function, you need to create a toggleClock() function. That's so you can access it easily using JavaScript (you'll see why in a moment). Note that this button is essentially the same as the one you created in Lesson 1 to show the alert.