Link to home
Start Free TrialLog in
Avatar of MJ
MJFlag for United States of America

asked on

Prevent "onchange" Event Conflict in JavaScript?

I have the below test javascript code which works:
var EmploymentStatusSelect = document.getElementById('mainForm:cont_appRequest_customers__0_employmentStatus:decoin:appRequest_customers__0_employmentStatus');
EmploymentStatusSelect.onchange = (event) => {
    var esSelVal = event.target.value;
    console.log(" event.target.value ==> " + event.target.value);
    if(esSelVal != ""){
        console.log("EmploymentStatusSelect ==> " + event.target.value);  
    } else {
       console.log("EmploymentStatusSelect will not report");
    }
}

Open in new window

The issue is it prevents the form on the page from functioning properly. There is existing logic on the web app for the onchange event in the form so when certain selections are made, the form dynamically displays other questions. When I introduce my code (above) , the existing dynamic field display breaks. Is there a way to rectify this in my code? I am injecting code via a tag management system so I can't touch the code on the page, I can only change my injected code. Is there a way to fix my code so it won't impact the other onchange logic?

Thanks!
Avatar of David S.
David S.
Flag of United States of America image

It seems that you're overwriting the existing event handler. You need to add the new one via addEventListener() instead.
Avatar of MJ

ASKER

Any idea how that would work based on the sample code?
ASKER CERTIFIED SOLUTION
Avatar of David S.
David S.
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of MJ

ASKER

I also had luck with:
var employmentStatusSelect = document.getElementById('mainForm:cont_appRequest_customers__0_employmentStatus:decoin:appRequest_customers__0_employmentStatus');

employmentStatusSelect.addEventListener('change', function() {
 // alert(this.value);
 // var tv = this.value;
  console.log("________________1st select:: this.value holds: " + this.value);
}, false);

Open in new window

Avatar of MJ

ASKER

Thank you David!