can we declare a function inside of eventlistner and call it from outside?

Question

Here I have declared a function "driverDetailsValidation" within the event listener. I want to call it from outside the event listener. This is the code which I have used but it doesn't work

driverType.onchange = function(e) {
        var isWithoutDriver = (driverType.value == "without driver");
        if(!isWithoutDriver){
            driverDetailsValidation();
        }
    }

    const driver_fields = document.getElementsByClassName("driver_fields");
    
    form.addEventListener("submit", (event) => {
        validity = true;
    
        function driverDetailsValidation() {
            for (let i = 0; i < driver_fields.length; i++) {
                if (driver_fields[i].value == "") {
                    driver_fields[i].style.border = "2px solid rgb(228, 29, 22)";
                    driver_fields[i].style.backgroundColor = "rgba(238, 156, 156, 0.788)";
                    //fields[i].placeholder = "This Field is Compulsory!";
                    validity = false;
                }
            }
        }
    }

Answer 1

You could declare a variable outside the event listener and assign the function to it inside the listener. Then, you can call the function from the variable like this:

 var fct; document.querySelector("div").addEventListener("click", function() { fct = function() { alert("Working"); } }); setInterval(function() { if (fct;= null) { fct(); fct = null, } }; 0);

 <div> Click me </div>

But it doesn't really make sense, I think.