为什么javascript css样式适用于第一个条件而不适用于第二个条件？

我有一个进度条，它应该对输入做出反应，如果输入为空或等于0，则内部进度div应该没有背景。对于所有其他输入，应填写。在输入为空的情况下，它确实有效，但是输入后，没有反映任何更改

var first=document.getElementById（“first”）；
如果（a.innerHTML==''）{
first.style.background=“无”；
}否则{
first.style.background=“#e91b23”；
}

。进度条\u垂直\u支架{
显示：内联块；
宽度：100%；
位置：相对位置；
}
.进度条垂直{
显示：内联块；
位置：相对位置；
浮动：左；
利润率：0px 2%0px 0px；
}
.进度条垂直：最后一个孩子{
边际：0px；
}
.进度条\垂直。进度条\内容条\外部{
高度：200px；
位置：相对位置；
}

它应该是：

  first.style.background = "#e91b23";
                            ^---

---

#

将该字符串标记为十六进制值。否则，它只是被视为一些随机垃圾

你有几个打字错误。我抓到了一份你的代码笔演示的副本

HTML

我让它工作起来了，当你在框中输入时，红色的进度条会被添加。但是，当您清除

输入范围时，指示灯保持红色，因为它只是在寻找按键。我将其更改为
oninput
，以获得所需的行为

您的函数中还有一个输入错误，它说
tisNumberKey
，改为
isNumberKey

<input id="a" oninput="return isNumberKey(event)" type="text" style="height: 250px; margin-top: 10px; width: 75%; text-align: center; font-size: 100px;" type="text" data-in="" />

Codepen演示不同？您可以更新Codepen以重新选择您的实际代码吗？这和这个问题不一样。对不起，现在更新了
function isNumberKey(){
var first =  document.getElementById("first");
var a = document.getElementById("a");
 if (a.value !== '') {
  first.setAttribute("class", "red-bg");
 } else {
  first.setAttribute("class", "no-bg");
 }
}