将JQuery代码转换为纯Javascript

我正试图将下面的JQuery重写为纯Javascript

我不知道为什么代码不起作用，但它不起作用。我猜我使用“聚焦”是不对的。有人能帮我吗

JQuery（工作）

这就是我到目前为止所做的（没有工作）

这是html标记

    <form action="#" id="login-form">
        <div class="form-group">
          <label class="label-control">
            <span class="label-text">Email</span>
          </label>
          <input type="email" name="email" class="form-control" />
        </div>
        <div class="form-group">
          <label class="label-control">
            <span class="label-text">Password</span>
          </label> 
          <input type="password" name="password" class="form-control" />
        </div>
        <input type="submit" value="Login" class="btn" />
    </form>

电子邮件
密码

关于jQuery代码的几个问题

该类被命名为

active

，您正在使用

onblur

。jquery代码同时在焦点和模糊上运行

const inputs=document.querySelectorAll（“.form group input”）；
const focusBlurHandler=（e）=>{
常数t=e.target；
设formgroup=t.parentElement；
如果（t.value.length>0）{
formgroup.classList.toggle（“活动”）；
}
};
数组.from（输入）.forEach（输入=>{
input.addEventListener（“focusin”，focusBlurHandler）；
addEventListener（“focusout”，focusBlurHandler）；
});
.active{background:lightgreen}

电子邮件
密码
关于jQuery代码的几个问题

该类被命名为
active
，您正在使用
onblur
。jquery代码同时在焦点和模糊上运行


const inputs=document.querySelectorAll（“.form group input”）；
const focusBlurHandler=（e）=>{
常数t=e.target；
设formgroup=t.parentElement；
如果（t.value.length>0）{
formgroup.classList.toggle（“活动”）；
}
};
数组.from（输入）.forEach（输入=>{
input.addEventListener（“focusin”，focusBlurHandler）；
addEventListener（“focusout”，focusBlurHandler）；
});
.active{background:lightgreen}

电子邮件
密码
您遇到了哪些错误？或者控制台在说什么？嗨，我没有从开发工具控制台得到任何错误。所以，它可能正在运行，但我误解了一些要点。您会遇到什么错误？或者控制台在说什么？嗨，我没有从开发工具控制台得到任何错误。所以它可能在运行，但我误解了一些观点。非常感谢，你让我开心。我根据这个建议编辑了我的代码，现在效果很好。非常感谢。非常感谢你，你让我开心。我根据这个建议编辑了我的代码，现在效果很好。非常感谢。
const inputs = document.querySelectorAll(".form-group input")
Array.from(inputs).forEach(input => {
  input.addEventListener("focusin", (e) => {
    const t = e.target as HTMLInputElement
    let formgroup = t.parentElement
    if(t.value.length > 0 ){
      formgroup.classList.toggle("onblur")
    }
  })
})

    <form action="#" id="login-form">
        <div class="form-group">
          <label class="label-control">
            <span class="label-text">Email</span>
          </label>
          <input type="email" name="email" class="form-control" />
        </div>
        <div class="form-group">
          <label class="label-control">
            <span class="label-text">Password</span>
          </label> 
          <input type="password" name="password" class="form-control" />
        </div>
        <input type="submit" value="Login" class="btn" />
    </form>