Prevent "onchange" Event Conflict in JavaScript?

894359
894359 used Ask the Experts™
on
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!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
View Solution Only
David S.Consultant & Challenge Subduer
Top Expert 2009

Commented:
It seems that you're overwriting the existing event handler. You need to add the new one via addEventListener() instead.
894359

Author

Commented:
Any idea how that would work based on the sample code?
Consultant & Challenge Subduer
Top Expert 2009
Commented: 
var EmploymentStatusSelect = document.getElementById('mainForm:cont_appRequest_customers__0_employmentStatus:decoin:appRequest_customers__0_employmentStatus');
EmploymentStatusSelect.addEventListener('change',(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

894359

Author

Commented:
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

894359

Author

Commented:
Thank you David!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial