Show/hide password onClick of button using Javascript only

by

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).

Remove onclick attribute and bind click event with addEventListener:

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

More Related Contents:

  1. My form’s validate() is not working
  2. Stop form refreshing page on submit
  3. Clearing using jQuery
  4. HTML5 form required attribute. Set custom validation message?
  5. Adding input elements dynamically to form
  6. Submitting a form on ‘Enter’ with jQuery?
  7. How can I set the form action through JavaScript?
  8. How to avoid the need for ctrl-click in a multi-select box using Javascript?
  9. How to send a JSON object using html form data
  10. Prevent form redirect OR refresh on submit?
  11. HTML form action and onsubmit issues
  12. passing form data to another HTML page
  13. Intercept a form submit in JavaScript and prevent normal submission
  14. Understanding HTML Form Element behavior
  15. Stop an input field in a form from being submitted
  16. Want HTML form submit to do nothing
  17. How to Call a JS function using OnClick event [duplicate]
  18. Enable/Disable submit button if checkbox is checked/unchecked?
  19. How to save data from a form with HTML5 Local Storage?
  20. Submit form after calling e.preventDefault()
  21. Change value of input and submit form in JavaScript
  22. How do you limit options selected in a html select box?
  23. Trigger autocomplete without submitting a form
  24. submit event does not fire if submit initiated programmatically
  25. Passing javascript variables between pages [duplicate]
  26. Angular form validation ng-disabled not working
  27. How to create dynamically
  28. How best to make a link submit a form
  29. A form’s “action” and “onsubmit”: Which executes first?
  30. Form submit button will not submit when name of button is “submit” [duplicate]

Leave a Comment