Password Checker - Glitch

JavaScript
1

I’m trying to create a simple password strength indicator using the html5 progress element and javascript. No console errors but not working thus far, can anyone spot the issue please?

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Password Meter</title>
<script>
						window.addEventListener('load', function() {
							var password = document.getElementById("pwd");
								password.addEventListener('change', function() {
								
								// Reset if password length is zero
								if (password.length === 0) {
										document.getElementById("progresslabel").innerHTML = "";
										document.getElementById("progress").value = "0";
										return;
								}
								// Password requirements
								var match = new Array();
								match.push("[$@$!%*#?&]"); // Special Chars
								match.push("[A-Z]");      // Uppercase
								match.push("[0-9]");      // Numbers
								match.push("[a-z]");     // Lowercase

								// Check progress
								var prog = 0;
								for (var i = 0; i < match.length; i++) {
										if (new RegExp(match[i]).test(password)) {
												prog++;
										}
								}
									//Length must be at least 8 chars
								if(prog > 2 && password.length > 7){
									prog++;
								}
								// Display it
								var progress = "";
								var strength = "";
								switch (prog) {
										case 0:
										case 1:
										case 2:
												strength = "25%";
												progress = "25";
												break;
										case 3:
												strength = "50%";
												progress = "50";
												break;
										case 4:
												strength = "75%";
												progress = "75";
												break;
										case 5:
												strength = "100% - Password strength is good";
												progress = "100";
												break;
								}
								document.getElementById("progresslabel").innerHTML = strength;
								document.getElementById("progress").value = progress;
						
						});
							});
				</script>
<style>
progress {
	-webkit-appearance: none;
	appearance: none;
	max-width: 120px;
	margin: 0 2px;
}
progress[value] {
	color: #777
} /* IE10 */
	progress::-webkit-progress-bar {
background:#ccc;
}
	progress::-webkit-progress-value {
background:#777
}
	progress::-moz-progress-bar {
background:#777;
}
</style>
</head>
<body>
<form>
	<div>
		<label for="pwd">Password:</label>
		<input type="text" id="pwd">
		<progress id="progress" value="0" max="100" data-label="password strength">70</progress>
		<span id="progresslabel"></span></div>
</form>
</body>
</html>
2

Your naming convention has confused the element for its .value. You’re treating password as though it was a string, but you define it as an element.

3

AH yes, I did a quick edit:

var passwordInput = document.getElementById("pwd");
passwordInput.addEventListener('change', function() {
password = passwordInput.value;

That fixes it :smiley:

2 Likes
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.