I am trying to change the color of a label every time the password text is changed to check and see if all parameters of the password are met (i.e. Capital letter, number, symbol etc.).
Im having problems getting the event listener to recognize an onChange or onKeyUp event and run the code i have defined for it to run. here is what i have tried so far:
document.querySelector("password").AddEventListener("Change", function() {
if (checkpw(document.querySelector("password").value)) == True) {
document.querySelector("pw").style.color = "#00ff00"
}else{
document.querySelector("pw").style.color = "#ff0000"
}
}
})
with
<label for="password" id="pw">Password:</label> <input type="password" name="password" id="password"><br>
and
function checkpw(what) {
let sm = 0;
let lg = 0;
let num = 0;
let sym = 0;
for (let i = 0; i < what.len(); i++) {
wstr = what.toString();
vchr = wstr.charCodeAt(i);
if (vchr > 40 && vchr < 127) {
if (vchr > 47 && vchr < 58) {
num = 1;
}else if (vchr > 64 && vchr < 91) {
lg = 1;
}else if (vchr > 96 && vchr < 123) {
sm = 1;
}else{
sym = 1;
}
}
}
if (sm && lg && num && sym) {
return true;
}else{
return false;
}}
i have tried several variations on the eventlisteners like getElementById("pw").onChange = function(), onKeyUp, onKeyDown, "KeyUp", "KeyDown". I've put an alert in just to see if it will alert me when the text is changed and im not getting the alert so i know it is my syntax in the event listener or query selector. if any one knows what im doing worng please let me know. Thanks in advance
Instead of 'change' try using 'input' eventListener, it will fire the event on every input in the input field.
field.addEventListener('input', () => {
//do something
})