How can I make a function execute first before another when it comes last in the DOM?

Question

In a software (i.e. OptinMonster), I'm trying to add customized Javascript that adds more functionality to a popup that has a function already written in the software (OptinMonster), in the head tag. I need to make my function execute first but I can't do that since my function is at the bottom of the body tag and the original script and functions in the head tag. How can I overwrite a script in the head tag with the script at the bottom of the body tag, is there a way to make the script at the bottom of the page execute first?

<head> <script src=""></script></head> //OptinMonster script
<body>
<script> //my customised script
var email = document.getElementById('workMail-field-email');
var button = document.getElementById('workMail-FieldsElementButton--zfEvw8Dhlz1j5CW5j1H8');


email.addEventListener('keydown', validate);
button.addEventListener('click', stopSubmit);

function validate(){

    var inputVal = document.getElementById('workMail-field-email').value;
    var pattern = /^[^ ]+@[me|mac|icloud|gmail|googlemail|hotmail|live|msn|outlook|yahoo|ymail|aol]+\.[a-z]{2,3}$/;

    if (inputVal.match(pattern)) {
        document.getElementById("invalid").style.display = "block";
        document.getElementsByClassName('workMail-error-header')[0].style.display = 'none';
        window.email.style.border = "2px solid rgb(255, 153, 153)";
        window.item = true;
    } else {
        document.getElementById("invalid").style.display = "none";
        window.email.style.border = "none";
        window.item = false;
    }
}
function stopSubmit(e){
    if (window.item){
        e.preventDefault();
        e.stopImmediatePropagation();
    }
}
</script>
</body>

The function I want to overwrite:

function(n) {
  var i = n.target,
    o = i.closest(e.listeners.submit) || i;
  o._omns && o._omns["click.omSubmitForm." + t] && (n.stopImmediatePropagation(), n.preventDefault(), e.C.Optin.init(), u.trigger(document, "Listeners.submit", {
    type: "default",
    Listeners: e,
    Campaign: e.C
  }))
}

Basically, I want the function not to validate any email address but only work email addresses and only then it submits the form. The problem is that it submits when it is a normal email not a work email address.

There is not unfortunately. The browser will execute the scripts in the order they are listed in the DOM. Some might run async or be deferred in other ways, but you don't have the ability to control what the browser does with those. — Matthew Herbst, Mar 17 '20 at 23:25
@Matthew If it's only declared and not executed, you can overwrite it though. — c1moore, Mar 17 '20 at 23:26
Here's the function I want to overwrite(added above ^^) function(n) { var i = n.target, o = i.closest(e.listeners.submit) || i; o._omns && o._omns["click.omSubmitForm." + t] && (n.stopImmediatePropagation(), n.preventDefault(), e.C.Optin.init(), u.trigger(document, "Listeners.submit", { type: "default", Listeners: e, Campaign: e.C })) } — Sally Ragab, Mar 17 '20 at 23:36
See [What is monkey patching?](https://stackoverflow.com/questions/5626193/what-is-monkey-patching) — Barmar, Mar 18 '20 at 00:21
SallyRagab as @c1moore mentioned, if the function you want to overwrite is only defined first, but not actually executed, then you should be able to overwrite it with your own definition. — Matthew Herbst, Mar 18 '20 at 05:39

How can I make a function execute first before another when it comes last in the DOM?

The function I want to overwrite:

0 Answers0