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.