Rectangle 27 0

html Showhide password onClick of button using Javascript only?


<input type="password" placeholder="Password" id="pwd" class="masked" name="password" />
        <button type="button" id="eye">
            <img src="eye.png" alt="eye"/>
         </button>
document.getElementById("eye").addEventListener("click", function(e){
        var pwd = document.getElementById("pwd");
        if(pwd.getAttribute("type")=="password"){
            pwd.setAttribute("type","text");
        } else {
            pwd.setAttribute("type","password");
        }
    });

You don't need to maintain one extra "pwShown" variable to decide whether to show text or hide it. All you need to do is to examine "type" attribute of "pwd" element as below :

Note
Rectangle 27 0

html Showhide password onClick of button using Javascript only?


<script>
showHide () {
var a=document.getElementById("pwd");
if (a.getAttribute("type")==="password")  {
document.getElementById("pwd").setAttribute("type","text");
document.getElementById("EYE").setAttribute("src","Hide Eye.png");
}
else {
document.getElementById("pwd").setAttribute("type","password");
document.getElementById("EYE").setAttribute("src","eye.png");
}
}
</script>

Follow these steps: Give the image an id as EYE. Also get an image called Hide Eye.png (an eye icon with a diagonal cut) and place it in the same folder where you are placing this html document. Type this in your HTML document along with the basic code you had typed earlier.

Note : There are few edits made in the source code from that present in the video.

Note
Rectangle 27 0

html Showhide password onClick of button using Javascript only?


<input type="password" placeholder="Password" id="pwd" class="masked" name="password" />
<button type="button" id="eye">
    <img src="https://cdn0.iconfinder.com/data/icons/feather/96/eye-16.png" alt="eye" />
</button>
function show() {
    var p = document.getElementById('pwd');
    p.setAttribute('type', 'text');
}

function hide() {
    var p = document.getElementById('pwd');
    p.setAttribute('type', 'password');
}

var pwShown = 0;

document.getElementById("eye").addEventListener("click", function () {
    if (pwShown == 0) {
        pwShown = 1;
        show();
    } else {
        pwShown = 0;
        hide();
    }
}, false);

Can we change the icon after clicked

Remove onclick attribute and bind click event with addEventListener:

You are binding click event every time you click a button. You don't want multiple event handlers. Plus you are redefining var pwShown = 0 on every click so you can never revert input state (pwShown stays the same).

Note
Rectangle 27 0

html Showhide password onClick of button using Javascript only?


<html>
<head> </head>

<body>
Pasword : <input type="password" name="password" id="password" />

<br/>
<br />

<button type="button" id="eye" onclick="if(password.type=='text')password.type='password'; else password.type='text';">
    toggle
</button>

</body>
</html>

This is the simplest of all....

Note
Rectangle 27 0

html Showhide password onClick of button using Javascript only?


.
  .
  .

  <span class="pwSpan">
    <input type="password" placeholder="Password" id="pwd"  class="masked"  name="password" onblur="return checkPassword();"/>
    <button type="button" class="show" id="show" value="Show" onclick="showHide()" tabIndex="-1" autocomplete="off" >
    </button>
  </span>
  <input type="text" class="error" name="pwErr" value="" tabIndex="-1" />
  .
  .
  .

function showHide()
{
   var pwField = document.getElementById("pwd");
   var showHideField = document.getElementById("show");
   var showHideValue = showHideField.value;

   if(showHide.trim() === "Show")
   {
      showHideField.value = "Hide";
      pwField.setAttribute('type', 'text');
   }
   else
   {
      showHideField.value = "Show";
      pwField.setAttribute('type', 'password');
   }
}

Dump the eye image and instead use a button showing "Show" or "Hide" according to its state. Then you just click on the text of the button. You can stylize the button to be borderless and initially with the same background as its surrounds. Highlight the button by setting .show:hover to either brighten the background of the button or else to brighten the color of the Show/Hide text. By putting the input and button into the same span, you will have them both inline ( CSS - span{display: inline-block;} ) and vertically align off the same bottom.

Use an ordinary text input just below the span for space to display the validation error alerts. Make sure its tab index is -1 and its background color & border is the same as its surrounding.

Note
Rectangle 27 0

html Showhide password onClick of button using Javascript only?


function showHide()
{
  var input = document.getElementById("pwd");
  if (input.getAttribute("type") === "password") {
    show();
  } else {
    hide();
  }
}

Based on what you wrote, you are adding the event both in html and in javascript (inside showHide function). May be you can change your js code from what you have, to:

Note
Rectangle 27 0

html Showhide password onClick of button using Javascript only?


var pwShown = 0;
function showHide()
{
 ...
}

You need to declare pwShown variable as global one.

Note
Rectangle 27 0

html Showhide password onClick of button using Javascript only?


The variable "pwShown" is misspelled (as "pwShow") in the else section of your Javascript code. Therefore, pwShown never gets reset to 0.

Note
Rectangle 27 0

html Showhide password onClick of button using Javascript only?


$(document).ready(function () {
        $("#eye").click(function () {
            if ($("#password").attr("type") === "password") {
                $("#password").attr("type", "text");
            } else {
                $("#password").attr("type", "password");
            }
        });
  });

JQuery solution from my code: (just change the IDs).

Note
Rectangle 27 0

html Showhide password onClick of button using Javascript only?


<html>
<head>
    <title>Visible Password Test</title>
</head>

<body>
Password : <input type="password" name="password" id="password" />

<button type="button" id="eye" title="Did you enter your password correctly?" 
    onmousedown="password.type='text';" 
    onmouseup="password.type='password';" 
    onmouseout="password.type='password';">Peek at Password</button>

</body>
</html>

This is an improvement upon Tunaki's answer. We don't even care to check which state the form field is in already, because this will be entirely determined by the state of the mouse. This allows the password to be only momentarily viewed (only as long as the mouse button is held down over the button.)

Note