Home > Enterprise >  The more I close the modal, the more times the alert pops up
The more I close the modal, the more times the alert pops up

Time:09-29

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

demonstration of problem

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            
  • Related