title: Why is my modal close button not working?
body: <p>I "made" a modal (got it from <a href="https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal" rel="nofollow noreferrer">here</a>). However, the button to close the modal just doesn't work. The event to click on any part the modal to close it does work though. I've spent hours on this and researched as much as I could but I just can't seem to find the issue.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const modal = document.querySelector(".modal");
  const closeModal = document.querySelector(".closeModal");
  
  document.querySelector("#shortCircuit").onclick = function() {
    modal.setAttribute('style', 'display: block;');
  }
  
  closeModal.onclick = function() {
    modal.setAttribute('style', 'display: none;');
  }
  
  window.onclick = function(event) {
    if (event.target === modal) {
      modal.setAttribute('style', 'display: none;');
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: hsl(0, 0%, 0%);
    background-color: hsla(0, 0%, 0%, 0.4);
  }
  
  .modal-content {
    background-color: hsl(0, 0%, 100%);
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #878787;
    width: 80%;
  }
  
  .closeModal {
    color: #aaa;
    float: right;
    font-size: 2em;
    font-weight: bold;
  }
  
  .closeModal:hover,
  .closeModal:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="flexLayout"&gt;
    &lt;div id="shortCircuit"&gt;
      &lt;h1&gt;Short-circuit&lt;/h1&gt;
      &lt;div class="modal"&gt;
        &lt;div class="modal-content"&gt;
          &lt;button class="closeModal"&gt;&amp;times;&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>