[JS] Jak utworzyć przycisk, który będzie ukrywał/wyświetlał wpisane hasło w polu input

Często, jeżeli gdzie wpisujemy długie i skomplikowane hasła zdarza się, że zapomni co już wpisaliśmy i aby być pewnym, że podane przez nas hasło będzie poprawnym usuwamy cały wpis i przystępujemy do ponownego wpisywania hasła. Możemy pomóc naszym użytkownikom poprzez dodanie przycisku, który za pomocą prostej funkcji wyświetli podgląd wpisanego do tej pory hasła. Standardowo pole w którym wpisujemy hasła wygląda tak:

Aby uruchomić przycisk "Zobacz" należy napisać nasz formularz oraz skrypt JS w następującej formie. Analizę skryptu zostawiam waszej wyobraźni.

1. <script type="text/javascript">


2. function change_pass(id){


3.     var old = document.getElementById(id);



4.     var new_value = old.value;


5.     var new_pass = document.createElement('input');



6.     var button = document.getElementById('button');


7.    



8.     new_pass.type = old.type.toLowerCase() == 'password' ? 'text' : 'password';



9.     new_pass.name = old.name;


10.     new_pass.id = old.id;



11.     new_pass.value = new_value;


12.     old.parentNode.replaceChild(new_pass, old);



13.    


14.     button.value = old.type.toLowerCase() == 'password' ? 'Ukryj' : 'Zobacz';



15. }


16. </script>


17. <form><input type="password" id="passwd">


18. <input id="button" type="button" value="Zobacz" onclick="change_pass('passwd')">



19. </form>