How to change/toggle the icon inside button?-CodePudding

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:p="http://primefaces.org/ui">

<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<style>
#togglePassword{
    margin-left: -5px;
    margin-top: 11px;
    cursor: pointer;
}

</style>

</head>

<body>
    <p:inputText id="productadminpassword" 
            value="password" 
            type="password">
      </p:inputText>
 
    <button type="button" onclick="showHide();" >
        
        <i class='fa fa-eye-slash' id="eye"  />
    </button>
 
 <script type="text/javascript">
  function showHide() {
     
      if (productadminpassword.type =="password") {
          productadminpassword.type = 'text';
         
      }
    
    else {
        productadminpassword.type = 'password';
        
        
    }
  };
</script>
</body>
</html>

This is what i have done.All i need is to change the eye-slash icon to eye inside button along with change of types(text to password and vice-versa).This code is changing the types but not icon.I dont know how to do it.If anyone knows,Kindly help me out.

CodePudding user response：

You can use Element.classList to add or remove classes from DOM

function showHide(obj) {
    var productadminpassword = document.getElementById('productadminpassword');
    var i = document.getElementById('eye')
    if (productadminpassword.type =="password") {
        productadminpassword.type = 'text';
        i.classList.remove("fa-eye-slash");
        i.classList.add("fa-eye");
    } else {
        productadminpassword.type = 'password';
        i.classList.remove("fa-eye");
        i.classList.add("fa-eye-slash");
    }
};