Modal isn't showing on button click - vanilla JavaScript

user_12640056 0
Viewed 174

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.

Here's my 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);
.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;
}
    <!-- Projects section -->

    <section class="projects-section">
      <div class="projects-container">
        <div class="projects-heading">
          <h2>I'm working on a few projects right now. Here's a list.</h2>
        </div>

        <!-- Project 1 -->

        <div class="project-box">
          <h2>Project 1</h2>
          <div id="project-1-button" class="project-button">
            <h4>Read More</h4>
          </div>
        </div>

        <div id="project-1-modal" class="project-modal">
          <div class="project-modal-content">
            <h2>Hello, this is an example</h2>
            <p>Lots of really interesting text right here.</p>
            <p>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.</p>
            <div id="project-1-close" class="project-close">
            <i class="fas fa-times fa-2x"></i>
            </div>
          </div>

        </div>

      <!-- End of Project 1 -->

If anyone could point me in the right direction as to what I'm doing wrong, that'd be great. Thanks!

css javascript
3 Answers

Try changing onclick to click on the eventlistener.

buttonOne.addEventListener("click", modalOneShow);
closeOne.addEventListener("click", modalOneRemove);
user_77135560

You have added onclick instead of click:

target.addEventListener(type, listener [, options]);

For types refer Docs

Should be corrected as in your case:

buttonOne.addEventListener("click", modalOneShow);
user_92354820

The cause is known ("onclick" should be "click"). Just for fun: a solution using event delegation and classList.toggle

document.addEventListener("click", toggleModal);

function toggleModal(evt) {
  const originBttn = evt.target.closest("#project-1-button");
  const originModalOpen = evt.target.closest("#project-1-modal");
  
  if (!originBttn && !originModalOpen) { return; }
  
  const modalNode = document.querySelector("#project-1-modal");
  modalNode.classList.toggle("show"); 
}
.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;
  display: none;
}

.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;
}
<!-- Projects section -->

    <section class="projects-section">
      <div class="projects-container">
        <div class="projects-heading">
          <h2>I'm working on a few projects right now. Here's a list.</h2>
        </div>

        <!-- Project 1 -->

        <div class="project-box">
          <h2>Project 1</h2>
          <div id="project-1-button" class="project-button">
            <h4>Read More</h4>
          </div>
        </div>

        <div id="project-1-modal" class="project-modal">
          <div class="project-modal-content">
            <h2>Hello, this is an example</h2>
            <p>Lots of really interesting text right here.</p>
            <p>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.</p>
            <div id="project-1-close" class="project-close">
            <i class="fas fa-times fa-2x"></i>
            </div>
          </div>

        </div>

      <!-- End of Project 1 -->

NICon_581860
Related