Toggle password visibility

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 an usual 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'
);
});

Demo

More

Previous
Press shift and enter for a new line
Next
Communication between an iframe and its parent window