title: Modal isn't showing on button click - vanilla JavaScript
body: <p>I'm trying to toggle a modal with vanilla JS, however the show button isn't working. I'm wanting the modal to add a class when the show button is clicked - that is in the bottom right of the project box. The show class will display the modal as a 100vhx100vw box.</p>
  
  <p>Here's my code:</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>// Variables
  
  let buttonOne = document.getElementById("project-1-button");
  let modalOne = document.getElementById("project-1-modal");
  let closeOne = document.getElementById("project-1-close");
  
  // Functions
  
  function modalOneShow() {
    modalOne.classList.add("show");
  }
  
  function modalOneRemove() {
    modalOne.classList.remove("show");
  }
  
  // Event Listeners
  
  buttonOne.addEventListener("onclick", modalOneShow);
  closeOne.addEventListener("onclick", modalOneRemove);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.projects-section {
    height: auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .projects-container {
    height: 90%;
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 100px 0;
  }
  
  .projects-heading {
    height: auto;
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 30px 0;
  }
  
  .project-box {
    height: 400px;
    width: 800px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: yellow;
  }
  
  .project-button {
    height: 10%;
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: absolute;
    bottom: 5px;
    right: 20px;
  }
  
  .project-button h4 {
    border-bottom: 1px solid #000;
    cursor: pointer;
  }
  
  .project-modal {
    height: 100vh;
    width: 100%;
    align-items: center;
    justify-content: center;
    z-index: 10;
    background-color: #e8ead3;
    position: fixed;
    top: 0;
    left: 0;
  }
  
  .project-modal-content {
    height: 90%;
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
  }
  
  .project-close {
    height: 40px;
    width: 40px;
    position: absolute;
    top: 0;
    right: 10px;
    cursor: pointer;
  }
  
  #project-1-modal {
    display: none;
  }
  
  #project-1-modal.show {
    display: flex;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;!-- Projects section --&gt;
  
      &lt;section class="projects-section"&gt;
        &lt;div class="projects-container"&gt;
          &lt;div class="projects-heading"&gt;
            &lt;h2&gt;I'm working on a few projects right now. Here's a list.&lt;/h2&gt;
          &lt;/div&gt;
  
          &lt;!-- Project 1 --&gt;
  
          &lt;div class="project-box"&gt;
            &lt;h2&gt;Project 1&lt;/h2&gt;
            &lt;div id="project-1-button" class="project-button"&gt;
              &lt;h4&gt;Read More&lt;/h4&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div id="project-1-modal" class="project-modal"&gt;
            &lt;div class="project-modal-content"&gt;
              &lt;h2&gt;Hello, this is an example&lt;/h2&gt;
              &lt;p&gt;Lots of really interesting text right here.&lt;/p&gt;
              &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
              &lt;div id="project-1-close" class="project-close"&gt;
              &lt;i class="fas fa-times fa-2x"&gt;&lt;/i&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
          &lt;/div&gt;
  
        &lt;!-- End of Project 1 --&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>If anyone could point me in the right direction as to what I'm doing wrong, that'd be great. Thanks!</p>