模式未显示在按钮单击上 - 香草 JavaScript

Question

我正在尝试使用vanilla JS切换模式，但是显示按钮不起作用。我希望模式在单击显示按钮时添加一个类 - 位于项目框的右下角。显示类将模态显示为 100vhx100vw 框。

这是我的代码：

// 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;

}

如果有人能为我指出我做错了什么的正确方向，那就太好了。谢谢！

Answer 1

您已添加而不是 ：onclickclicktarget.addEventListener(type, listener [, options]);有关参考文档types应按照您的情况进行更正：buttonOne.addEventListener("click", modalOneShow);

Answer 2

尝试更改单击以单击事件列表。buttonOne.addEventListener("click", modalOneShow); closeOne.addEventListener("click", modalOneRemove);

Answer 3

原因已知（“点击”应为“点击”）。只是为了好玩：使用事件委派和classList.toggledocument.addEventListener("click", toggleModal);function toggleModal(evt) {&nbsp; const originBttn = evt.target.closest("#project-1-button");&nbsp; const originModalOpen = evt.target.closest("#project-1-modal");&nbsp;&nbsp;&nbsp; if (!originBttn && !originModalOpen) { return; }&nbsp;&nbsp;&nbsp; const modalNode = document.querySelector("#project-1-modal");&nbsp; modalNode.classList.toggle("show");&nbsp;}.projects-section {&nbsp; height: auto;&nbsp; width: 100%;&nbsp; display: flex;&nbsp; align-items: center;&nbsp; justify-content: center;}.projects-container {&nbsp; height: 90%;&nbsp; width: 90%;&nbsp; display: flex;&nbsp; align-items: center;&nbsp; justify-content: center;&nbsp; flex-direction: column;&nbsp; margin: 100px 0;}.projects-heading {&nbsp; height: auto;&nbsp; width: 90%;&nbsp; display: flex;&nbsp; align-items: center;&nbsp; justify-content: center;&nbsp; margin: 30px 0;}.project-box {&nbsp; height: 400px;&nbsp; width: 800px;&nbsp; display: flex;&nbsp; align-items: center;&nbsp; justify-content: center;&nbsp; position: relative;&nbsp; background-color: yellow;}.project-button {&nbsp; height: 10%;&nbsp; width: 40%;&nbsp; display: flex;&nbsp; align-items: center;&nbsp; justify-content: flex-end;&nbsp; position: absolute;&nbsp; bottom: 5px;&nbsp; right: 20px;}.project-button h4 {&nbsp; border-bottom: 1px solid #000;&nbsp; cursor: pointer;}.project-modal {&nbsp; height: 100vh;&nbsp; width: 100%;&nbsp; align-items: center;&nbsp; justify-content: center;&nbsp; z-index: 10;&nbsp; background-color: #e8ead3;&nbsp; position: fixed;&nbsp; top: 0;&nbsp; left: 0;&nbsp; display: none;}.project-modal-content {&nbsp; height: 90%;&nbsp; width: 90%;&nbsp; display: flex;&nbsp; align-items: center;&nbsp; justify-content: center;&nbsp; flex-direction: column;&nbsp; position: relative;}.project-close {&nbsp; height: 40px;&nbsp; width: 40px;&nbsp; position: absolute;&nbsp; top: 0;&nbsp; right: 10px;&nbsp; cursor: pointer;}#project-1-modal {&nbsp; display: none;}#project-1-modal.show {&nbsp; display: flex;}<!-- Projects section -->&nbsp; &nbsp; <section class="projects-section">&nbsp; &nbsp; &nbsp; <div class="projects-container">&nbsp; &nbsp; &nbsp; &nbsp; <div class="projects-heading">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2>I'm working on a few projects right now. Here's a list.</h2>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <!-- Project 1 -->&nbsp; &nbsp; &nbsp; &nbsp; <div class="project-box">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2>Project 1</h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="project-1-button" class="project-button">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4>Read More</h4>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div id="project-1-modal" class="project-modal">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="project-modal-content">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2>Hello, this is an example</h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>Lots of really interesting text right here.</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="project-1-close" class="project-close">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i class="fas fa-times fa-2x"></i>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <!-- End of Project 1 -->