Easy way to show/hide password for javascript beginners.

You'll see a password input with a nice appearance and behaviour on the codepen linked at the bottom, as well this simple example.
If you want or need or like a form styling tutorial let a comment and I'll take it in mind! =D

First things first:

Structure:

<label for="passwd">Password</label>
  <div class="relative">
  <input type="password" id="passwd" name="passwd" />
  <i class="fa fa-eye showpwd" onClick="showPwd('passwd', this)"></i>
</div>

I learnt how to put html code for dev.to not rendering it... claps on me!

You can see the onClick attribute on the icon, it calls the script below with the target input ID and this as param (by context, this here is the main <i> element that triggers the onClick event).

So on the script we'll receive a String and an Object.

basic styling:

.relative {
  position: relative;
  width: fit-content;
  i {
    position: absolute;
    top: 3px;
    right: 5px;
  }
}

Script:

function showPwd(id, el) {
  let x = document.getElementById(id);
  if (x.type === "password") {
    x.type = "text";
    el.className = 'fa fa-eye-slash showpwd';
  } else {
    x.type = "password";
    el.className = 'fa fa-eye showpwd';
  }
}

We are selecting an element by the first received param which must match to an input element.
If this DOM element match with the type password, simply change it's type to text.
Changing the type of the input will make the content readable.
We change the icon class too, adding a slash for giving feedback to the user.

If the type of the input isn't password means that it's already shown and the user clicked on the non-slashed eye icon, so we set the type to password again to hide the characters on it, and set the icon back to the original position.

You're done!

Different approach, please? Of course!

You can also attach an eventlistener instead using onclick and it will look something like:

window.onload = function () {


  const elements = document.querySelectorAll('[type="password"]');

  elements.forEach(function(elem) {
    elem.parentNode.querySelector('i').addEventListener('click', function(){
      if (elem.type === "password") {
        elem.type = "text";
        this.className = 'fa fa-eye-slash showpwd';
      } else {
        elem.type = "password";
        this.className = 'fa fa-eye showpwd';
      }
    });
  });


}

We wait for window to load but you can use document onload instead if you want. The difference is that document.onload will wait till DOM loads and window.onload will wait till DOM plus all linked scripts and style sheets. Use one or another but you'll need this little waiting because if you try to add an eventlistener (or doing whatever) on a DOM element that does not exists yet, you'll get an error and the javascript execution will stop.

Then we search for all elements with type="password" on the DOM.
For each found element we search for the icon next to it, that must be wrapped inside same parent element to work "as is".

The literal expression is something like: "Select the <i> element inside the parent element of my element with type="password".

Then on this icons we set a click event listener which triggers the same function explained avobe.

As promised and as almost always here is the codepen link

If you're in doubt with some function or whatever ask me in the comment section! =D

Best regards,