我遇到了这个问题，关闭模式窗口的次数越多，弹出alert 的次数就越多.这很可能与"如果不然"的情况有关，但我是一个初学者，不知道我到底设置错了什么.我试着在另一个里面装上"如果"，但什么都不起作用
JS:
projectEditTitleBtn.forEach((btn) => {
btn.addEventListener("click", (e) => {
let data = e.target.dataset.modalOpen;
modalTask.forEach((modal) => {
if (modal.dataset.modal == data) {
openModalEditProject(modal);
}
});
modalAddBtn.forEach((modalAdd) => {
modalAdd.addEventListener("click", function (e) {
e.preventDefault();
if (projectNewTitle.value.length === 0 || "") {
alert("fields cannot be empty!");
}
if (projectNewTitle.value.length < 25 && projectNewTitle.value.length != 0) {
projectTitle.textContent = `${projectNewTitle.value}`;
sidebarProjectTitle.textContent = `${projectNewTitle.value}`;
const parentModal = this.closest(".modal");
parentModal.classList.remove("modal_state_active");
overlay.classList.remove("modal-bg_state_active");
modalBody.classList.remove("modal-body_state_active");
overlayProject.classList.remove("modal-bg_state_active");
projectModalBody.classList.remove("modal-body_state_active");
editProjectModalBody.classList.remove("modal-body_state_active");
editOverlayProject.classList.remove("modal-bg_state_active");
}
if (projectNewTitle.value.length > 25) {
alert("The name of the project can not be longer than 25 characters!");
}
});
modalAdd.addEventListener("keypress", function (event) {
if (projectNewTitle.value.length === 0 || "") {
alert("fields cannot be empty!");
}
if (event.key === "Enter" && projectNewTitle.value.length < 25 && projectNewTitle.value.length != 0) {
projectTitle.textContent = `${projectNewTitle.value}`;
sidebarProjectTitle.textContent = `${projectNewTitle.value}`;
const parentModal = this.closest(".modal");
parentModal.classList.remove("modal_state_active");
overlay.classList.remove("modal-bg_state_active");
modalBody.classList.remove("modal-body_state_active");
overlayProject.classList.remove("modal-bg_state_active");
projectModalBody.classList.remove("modal-body_state_active");
editProjectModalBody.classList.remove("modal-body_state_active");
editOverlayProject.classList.remove("modal-bg_state_active");
}
if (projectNewTitle.value.length > 25) {
alert("The name of the project can not be longer than 25 characters!");
}
});
});
});
closeButtons.forEach(function (item) {
item.addEventListener("click", function (e) {
const parentModal = this.closest(".modal");
parentModal.classList.remove("modal_state_active");
overlay.classList.remove("modal-bg_state_active");
modalBody.classList.remove("modal-body_state_active");
overlayProject.classList.remove("modal-bg_state_active");
projectModalBody.classList.remove("modal-body_state_active");
editProjectModalBody.classList.remove("modal-body_state_active");
editOverlayProject.classList.remove("modal-bg_state_active");
});
});
cancelButtons.forEach(function (item) {
item.addEventListener("click", function (e) {
e.preventDefault();
const parentModal = this.closest(".modal");
parentModal.classList.remove("modal_state_active");
overlay.classList.remove("modal-bg_state_active");
modalBody.classList.remove("modal-body_state_active");
projectModalBody.classList.remove("modal-body_state_active");
overlayProject.classList.remove("modal-bg_state_active");
editProjectModalBody.classList.remove("modal-body_state_active");
editOverlayProject.classList.remove("modal-bg_state_active");
});
});
function closeModal(e) {
if (e.target.classList.contains("modal-bg")) {
e.target.closest(".modal").classList.remove("modal_state_active");
e.target.closest(".modal-bg").classList.remove("modal-bg_state_active");
modalBody.classList.remove("modal-body_state_active");
overlayProject.classList.remove("modal-bg_state_active");
projectModalBody.classList.remove("modal-body_state_active");
editProjectModalBody.classList.remove("modal-body_state_active");
editOverlayProject.classList.remove("modal-bg_state_active");
}
};
modalTask.forEach(modal => {
modal.addEventListener('click', e => closeModal(e))
});
document.body.addEventListener("keyup",function (e) {
const key = e.keyCode;
if (key == 27) {
document.querySelector(".modal.modal_state_active").classList.remove("modal_state_active");
overlay.classList.remove("modal-bg_state_active");
modalBody.classList.remove("modal-body_state_active");
projectModalBody.classList.remove("modal-body_state_active");
overlayProject.classList.remove("modal-bg_state_active");
editProjectModalBody.classList.remove("modal-body_state_active");
editOverlayProject.classList.remove("modal-bg_state_active");
}
},
false
);
});
Html:
<div class="modal modal_type_edit-project" data-modal="edit-project">
<div class="modal-bg modal-bg_type_edit-project">
<div class="modal-body modal-body_type_edit-project">
<div class="modal-content modal-callback">
<div class="modal-callback__header">
<h1 class="modal-callback__title">Change project name ????????</h1>
<button class="modal-close">
<svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M16.7659 0.338019C17.0892 0.654618 17.0892 1.16792 16.7659 1.48452L9.72132 8.38128L16.7659 15.2781C17.0893 15.5947 17.0893 16.108 16.7659 16.4246C16.4425 16.7412 15.9182 16.7412 15.5948 16.4246L8.72774 9.70155L1.86066 16.4246C1.53728 16.7412 1.01297 16.7412 0.689589 16.4246C0.366206 16.108 0.366206 15.5947 0.689589 15.2781L7.73413 8.38131L0.689558 1.48452C0.366176 1.16792 0.366176 0.654618 0.689558 0.338019C1.01294 0.0214211 1.53725 0.0214211 1.86063 0.338019L8.72771 7.06104L15.5948 0.338019C15.9182 0.0214211 16.4425 0.0214211 16.7659 0.338019Z"
fill="#787486"
/>
</svg>
</button>
</div>
<form class="modal-callback__form">
<div class="modal-callback__labels">
<label class="modal-callback__label">
Enter new name
<input type="text" class="modal-callback__input modal-callback__input_type_edit-project" placeholder="enter new name of project" />
</label>
</div>
<div class="modal-callback__btns">
<button class="modal-btn modal-btn_type_no-bg">Cancel</button>
<button class="modal-btn modal-btn_type_default modal-btn_type_edit-default">Save</button>
</div>
</form>
</div>
</div>
</div>