如何更改javascript函数中span内联元素的类？

我正在尝试实现一个带有眼睛图标的密码文本框（css类-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>

这个函数只更改输入类型，但我无法将类更改为fa-fa-eye-slash。css文件中存在fa eye和fa eye斜杠类。但我不知道如何更改的类，因为它是在跨度元素内

---

谁能帮我一下吗

这是一个你想要的例子。（来自代码笔小提琴）

$（“.toggle password”）。单击（函数（）{
$（this.toggleClass（“fa-eye-fa-eye-slash”）；
变量输入=$（$（this.attr（“切换”））；
if（input.attr（“type”）=“password”）{
input.attr（“类型”、“文本”）；
}否则{
输入属性（“类型”、“密码”）；
}
});
.panel{
利润率：20px；
}
.字段图标{
浮动：对；
左边距：-25px；
利润上限：-25px；
右边距：10px；
位置：相对位置；
z指数：2；
}

暗语
请尝试以下代码，它将更改您的-tag的css类


函数类（el，类名）
{
if（el.classList）
返回el.classList.contains（className）；
return！！el.className.match（新的RegExp（“（\\s |^）”+className+”（\\s |$））；
}
函数addClass（el，类名）
{
if（el.classList）
el.classList.add（类名称）
如果（！hasClass（el，className））为else
el.className+=“”+className；
}
函数removeClass（el，类名）
{
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.）；
}
}
函数类型更改（controlId，spanId）{
控制台信息（spanId）；
var x=document.getElementById（controlId）；
var iconObj=document.getElementById（spanId）；
如果（x.type==“密码”）{
x、 type=“text”；
for（var i=0；i}
谢谢大家。我通过编写下面的新js函数解决了这个问题，并在单击时调用它

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

可能与不完全相同。如果我给出确切的div id，addClass或.removeClass可以正常工作。但这里我想更改另一个内联元素中的内联元素的类。
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"; 

 }
 }

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