🍦 Vanilla JavaScript

Projects for the Vanilla JS Academy

Day 5

Toggle Passwords in Multiple Forms

Goal

Modify the previous script to support multiple forms, ensuring each checkbox only toggles fields in its own form.

Project

Change Username

Enter your username and password to change your username.

Change Password

Enter your current password and new password below.

View Source 
(function() {
	let elPassword = document.querySelector( "#password" );
	let elPasswords = document.querySelectorAll( "#current-password, #new-password" );

	document.addEventListener( "input", e =>
	{
		if( e.target.id === "show-password" )
		{
			let inputType = e.target.checked ? "text" : "password";
			elPassword.setAttribute( "type", inputType );
		}
		if( e.target.id === "show-passwords" )
		{
			let inputType = e.target.checked ? "text" : "password";
			elPasswords.forEach( elPassword => elPassword.setAttribute( "type", inputType ) );
		}
	});
})();

Projects