如果 addEventListener 已被触发一次，则触发 removeEventLister

Question

i want my event to be deleted if a file already been uploaded. In other words, i want only one attachment to be added. But my 'active' variable is never equal to 'false'

const form = document.querySelector("form"),
    fileInput = document.querySelector(".file-input"),
    progressArea = document.querySelector(".progress-area"),
    uploadedArea = document.querySelector(".uploaded-area"),
    clickedItem = document.querySelector(".clickkk");
let active = true;

if (active) {
    clickedItem.addEventListener("click", () => {
        fileInput.click();
    });
} else {
    clickedItem.removeEventListener("click", () => {
        fileInput.click();
    });
}

fileInput.onchange = ({ target }) => {
    let file = target.files[0];
    if (file) {
        let fileName = file.name;
        if (fileName.length >= 12) {
            let splitName = fileName.split('.');
            fileName = splitName[0].substring(0, 13) + "... ." + splitName[1];
        }
        uploadFile(fileName);
        active = false;
    }
}```

Answer 1

I suggest use local storage (you can use cookies and session storage too).

localStorage.setItem('active', 'true');

let active = JSON.parse(localStorage.getItem('active'));
if (active) {
    clickedItem.addEventListener("click", () => {
        fileInput.click();
    });
} else {
    clickedItem.removeEventListener("click", () => {
        fileInput.click();
    });
}

and inside fileInput set this:

localStorage.setItem('active', 'false');