Assume that we have two elements. A password element, and a button for toggling the visibility of the password:
<input type="password" id="password" />
<button id="toggle">Toggle</button>
In order to show the password, we turn the password element to a textbox whose type
attribute is text
:
// Query the elements
const passwordEle = document.getElementById('password');
const toggleEle = document.getElementById('toggle');
toggleEle.addEventListener('click', function() {
const type = passwordEle.getAttribute('type');
passwordEle.setAttribute(
'type',
// Switch it to a text field if it's a password field
// currently, and vice versa
type === 'password' ? 'text' : 'password'
);
});