I ran into this problem the more often I close the modal window the more times the alert pops up. Most likely it has to do with the "if else" conditions, but I'm a beginner and can't figure out what exactly I set wrong. I tried to make one "if" inside the other but nothing works
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 data-modal="edit-project">
<div >
<div >
<div >
<div >
<h1 >Change project name