Password view toggle

Question

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.

The answer is contained in the duplicate. Same as it was already yesterday, when you asked that exact same question, https://stackoverflow.com/q/72172075/1427878 Please do not just ask questions that have been closed as a duplicate, again. If you have trouble understanding how what is explained in the duplicate solves your problem, then you can ask for clarification in comments. — CBroe, May 10 '22 at 12:16

score 0 · Answer 1 · answered May 10 '22 at 12:13

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');
        }

Password view toggle

1 Answers1