Show/hide password onClick of button using Javascript only

Question

I want to create password toggle function when clicked on the eye icon using Javascript only. I have written code for it but it works only to show the password text and not

Answer 1

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.

  .
  .
  .

  
    
    
    
  
  
  .
  .
  .

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

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