Unexpected Javascript DOM event listener issues -

Unexpected Javascript DOM event listener issues -

i have created function checks 2 password fields, when prepare inpput 1 field gets success class , other 1 doesnt; in order both fields have success class have click onto update. dom event can utilize update straight away ?

window.onload = addlisteners; function addlisteners() { if(window.addeventlistener) { _('pass1').addeventlistener("blur", checkpassword, false); _('pass2').addeventlistener("blur", checkpassword, false); } else if (window.attachevent) { _('pass1').attachevent("onblur", checkpassword); _('pass2').attachevent("onblur", checkpassword); } } // index pages field checker function checkpassword() { var p1val = _("pass1").value; var p2val = _("pass2").value; var p1 = _("pass1"); var p2 = _("pass2"); if(p1val != p2val) { this.classname = this.classname.replace( /(?:^|\s)susuccess(?!\s)/g , '' ); this.classname += " suerror"; _("pass2check").innerhtml = "your password fields not match"; } else if (p1val == "" && p2val == ""){ p1.classname = p1.classname.replace( /(?:^|\s)susuccess(?!\s)/g , '' ); p2.classname = p2.classname.replace( /(?:^|\s)susuccess(?!\s)/g , '' ); p1.classname += " suerror"; p2.classname += " suerror"; _("pass2check").innerhtml = "fill in both password fields"; } else { this.classname = this.classname.replace( /(?:^|\s)suerror(?!\s)/g , '' ); this.classname += " susuccess"; _("pass2check").innerhtml = "your password fields match"; } }

the issue that, when validation succeeds when values doesn't match, performing operations on this, element triggered event, , other input left until trigger it's on handler.

change function follows:

function checkpassword() { var p1 = _("pass1"); var p2 = _("pass2"); // here can avoid additional dom traversal storing reference first var p1val = p1.value; var p2val = p2.value; // can combine invalid conditions using || operator if(p1val != p2val || p1val == "" && p2val == ""){ p1.classname = p1.classname.replace( /(?:^|\s)susuccess(?!\s)/g , '' ); p2.classname = p2.classname.replace( /(?:^|\s)susuccess(?!\s)/g , '' ); p1.classname += " suerror"; p2.classname += " suerror"; _("pass2check").innerhtml = "fill in both password fields"; } else { p1.classname = p1.classname.replace( /(?:^|\s)suerror(?!\s)/g , '' ); p2.classname = p2.classname.replace( /(?:^|\s)suerror(?!\s)/g , '' ); p1.classname += " susuccess"; p2.classname += " susuccess"; _("pass2check").innerhtml = "your password fields match"; } }

side note: can utilize add() , remove() methods of classlist dom api adding , removing css classes rather regex if older browser back upwards not issue.

javascript dom javascript-events listener