Step 5

  • Preferably we want the "output" to be hidden until we click on the zzz button.

  • Hiding the output is simple; add the following display property to the style selector for output.

.output {
    margin: 1em 5em 1em 5em;
    border: 3px solid white;
    display: none;
}
  • Save the index.html file; refresh the index page in the browser.

  • Update the handleOnClickEvent function as follows:

<script>
  function handleOnClickEvent() {
    let output = document.querySelector('.output');
    output.style.display = 'block';
  }
</script>
  • The document object is the root node of the HTML document. When an HTML document is loaded into a browser, it becomes a document object. The document object is also called the DOM (Document Object Model).

  • The querySelector() method returns the first element of DOM that matches a specified CSS selector in the document.

  • Save the index.html file; refresh the index page in the browser. Notice the output is hidden until you click on the zzz button.