I'm trying to do a password visibility toogle because some browsers don't have one like Microsoft Edge.
Here's the code:
<input type="password" name="password" placeholder="Creati o parola">
<input type="checkbox" onclick="visibility()" id="pass_visible">
<label for="pass_visible"><i id="pass_icon" class="bi bi-eye"></i></label>
function visibility()
{
var x = document.getElementsByName("password");
if(x.type === "password")
{
x.type = "text";
document.getElementById("pass_icon").className = "bi bi-eye-slash";
}
else
{
x.type = "password";
document.getElementById("pass_icon").className = "bi bi-eye";
}
}
The problem is that for some reason it changes only "pass_icon". The type for x stays the same.
You need to switch the type from password to text and vice versa when you press the toggle switch.
<input type="password" name="password" id="password" placeholder="Creati o parola">
function visibility()
{
const passwordEle = document.getElementById('password');
const type = passwordEle.getAttribute('type');
passwordEle.setAttribute('type', type === 'password' ? 'text' :'password');
}