How to change/toggle the icon inside button?

Question

<!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.

Answer 1

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");
    }
};

How to change/toggle the icon inside button?

Question

1 answers

solution1
0 ACCPTED 2022-08-05 08:20:11

How to change/toggle the icon inside button?

Question

1 answers

solution1 0 ACCPTED 2022-08-05 08:20:11

solution1
0 ACCPTED 2022-08-05 08:20:11