How to change class of span inline element in javascript function?

Question

I am trying to implement text box for password which has a eye icon( css class- fa fa-eye). when user click on the eye icon it changes to eye slash icon and input type to text.

<div class="input-group show-hide-password">
      <form:password id="form-control" path="password" class="form-control" required="" />
       <div class="input-group-append">
         <span id="PassSpan" class="input-group-text" onclick="typeChange('form- 
         control','PassSpan')">
          <i class="fa fa-eye"  aria-hidden="true"></i> 
         </span>
       </div>
</div>

Js file

function typeChange(controlId, spanId) { 
     var x =  document.getElementById(controlId);        
     if (x.type === "password")
     { x.type = "text";         
     } 
     else { 
         x.type = "password";           
         } 
 }

this function only changes the input type but i am not able to change the class to fa fa-eye-slash. fa-eye and fa-eye-slash classes are present on css file. but I am not sure how to change the class of as it is inside span element.

Can someone please help me with that.

Possible duplicate of [Change an element's class with JavaScript](https://stackoverflow.com/questions/195951/change-an-elements-class-with-javascript) — devlin carnate, Oct 07 '18 at 18:53
not exactly. .addClass or .removeClass is working fine if i give the exact div id. but here i want to change class of a inline element which is inside another inline element. — SUNNY, Oct 07 '18 at 19:03

ibrahimyilmaz · Answer 1 · 2018-10-07T19:13:42.710

Here is an example of what you want. (from a codepen fiddle)

$(".toggle-password").click(function() {
  $(this).toggleClass("fa-eye fa-eye-slash");
  var input = $($(this).attr("toggle"));
  if (input.attr("type") == "password") {
    input.attr("type", "text");
  } else {
    input.attr("type", "password");
  }
});

.panel {
  margin: 20px;
}

.field-icon {
  float: right;
  margin-left: -25px;
  margin-top: -25px;
  margin-right: 10px;
  position: relative;
  z-index: 2;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="panel panel-default">
  <div class="panel-body">
    <form class="form-horizontal" method="" action="">
      <div class="form-group">
        <label class="col-md-4 control-label">Password</label>
        <div class="col-md-6">
          <input id="password-field" type="password" class="form-control" name="password" value="mypassword">
          <span toggle="#password-field" class="fa fa-fw fa-eye field-icon toggle-password"></span>
        </div>
      </div>
    </form>
  </div>
</div>

score 0 · Answer 2 · answered Oct 09 '18 at 13:58

Thank you all. I resolved it by writing the below new js function and i am invoking it onclick

function typeChange(controlId, spanId) { 
     var x =  document.getElementById(controlId);
     if ( spanId.classList.contains('fa-eye') ){
         spanId.classList.toggle('fa-eye-slash');
     }
     if (x.type === "password")
     { x.type = "text";      
     }
     else { 
         x.type = "password"; 

 }
 }

JSP

<i class="fa fa-eye" id ="passi" aria-hidden="true" onclick="typeChange('form-control',this)"></i>

score -1 · Answer 3 · answered Oct 07 '18 at 21:20

Plz try the following code, it should change your css classes of your -tag.

function hasClass(el, className)
{
    if (el.classList)
        return el.classList.contains(className);
    return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
}

function addClass(el, className)
{
    if (el.classList)
        el.classList.add(className)
    else if (!hasClass(el, className))
        el.className += " " + className;
}

function removeClass(el, className)
{
    if (el.classList)
        el.classList.remove(className)
    else if (hasClass(el, className))
    {
        var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
        el.className = el.className.replace(reg, ' ');
    }
}
function typeChange(controlId, spanId) { 
 console.info(spanId);
 var x =  document.getElementById(controlId);
 var iconObj = document.getElementById(spanId);
 if (x.type === "password"){
  x.type = "text";
  for(var i = 0; i < iconObj.children.length; i++){
   if(iconObj.children[i]!=null && hasClass(iconObj.children[i], "fa-eye")){
    removeClass(iconObj.children[i], "fa-eye");
    addClass(iconObj.children[i], "fa-eye-slash");
   }
  }
 } else {
  x.type = "password";
  for(var i = 0; i < iconObj.children.length; i++){
   if(iconObj.children[i]!=null && hasClass(iconObj.children[i], "fa-eye-slash")){
    removeClass(iconObj.children[i], "fa-eye-slash");
    addClass(iconObj.children[i], "fa-eye");
   }
  }
 } 
}

<div class="input-group show-hide-password">
      <form:password id="form-control" path="password" class="form-control" required="" />
       <div class="input-group-append">
         <span id="PassSpan" class="input-group-text" onclick="typeChange('form- 
         control','PassSpan')">
          <i class="fa fa-eye"  aria-hidden="true"></i> 
         </span>
       </div>
</div>

How to change class of span inline element in javascript function?

3 Answers3