We help IT Professionals succeed at work.

Prevent "onchange" Event Conflict in JavaScript?

894359
894359 asked
on
102 Views
Last Modified: 2018-12-06
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

David S.Consultant & Challenge Subduer
CERTIFIED EXPERT
Top Expert 2009

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

Author

Commented:
Any idea how that would work based on the sample code?
Consultant & Challenge Subduer
CERTIFIED EXPERT
Top Expert 2009
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION

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

Author

Commented:
Thank you David!