How to toggle styles by using click function anywhere on the screen

I’m trying change styles of element by clicking anywhere on the screen, but it’s not working. can anyone help me out. thankyou.

   <style>
    #myDIV {
      width: 100%;
      padding: 50px 0;
      text-align: center;
      background-color: lightblue;
      margin-top: 20px;
    }
    </style>
 
   <p>Click to toggle</p>
   <div id="myDIV">This is my DIV element.</div>
    
    <script>
    window.addEventListener('click', 
    function myFunction() {
      var x = document.getElementById("myDIV");
      if (x.style.width === "100%") {
        x.style.width = "10%";
      } else {
        x.style.width = "100%";
      }
    }
    </script>