JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<input type="password" class="input-password">
<button type="button" class="btn-password-show">show password</button>

CSS

input.active {
  border: 1px solid red;
}

JavaScript

var inputPassword = document.querySelector('.input-password');
var btnPassword = document.querySelector('.btn-password-show');

btnPassword.addEventListener('click', function(){
	var inputType = inputPassword.getAttribute('type');
  //alert(btnPassword.firstChild.data);
  if(inputType == "password") {
  	inputPassword.setAttribute('type', 'text');
    btnPassword.firstChild.data = "hide password";
  } else {
  	inputPassword.setAttribute('type', 'password');
    btnPassword.firstChild.data = "show password";
  }
	
})