Javascript 在textarea中键入时更改div的类

我正在尝试更改div onkeypress和textarea onkeypup的类。但是，只有文本在div内部发生变化，而不是类本身。我不希望div中的文本只改变div的类

JS

HTML

类别2

尝试这样做：

document.getElementById('typing_on').className = "Class1";

这将更改div的innerHTML或内容

document.getElementById('typing_on').className = "Class1";

---

您可以使用

+

选择器更改样式

  #text:focus + #typing_on {
    background-color: red;
  }

---

您可以在jquery中非常轻松地完成此操作
检查

var定时器=0；
函数还原体（）{
定时器=定时器-1；
isTyping（真）；
}
函数类型化（val）{
如果（val='true'）{
document.getElementById（'typing_on'）.innerHTML=“Class1”；
}否则{
如果（定时器改变<代码>内文HTML<代码>使用<代码>类名应用后，我也注意到在做了这个改变之后，我需要考虑大小写敏感度。JS中的Cask1不起作用，我必须匹配我的CSS，这是Case1。谢谢。如果我只想改变焦点的话，我会用这个解决方案。谢谢。不过我是这样的。我希望在将textarea键入时更改类。如果要保留div上当前的类，请使用.addClass（）方法。removeClass（）将以相同的方式删除类。
document.getElementById('typing_on').className = "Class1";

document.getElementById('typing_on').innerHTML = "Class1";

document.getElementById('typing_on').className = "Class1";

  #text:focus + #typing_on {
    background-color: red;
  }

    var timer = 0;

function reduceTimer() {
  timer = timer - 1;
  isTyping(true);
}

function isTyping(val) {
  if (val == 'true') {
    document.getElementById('typing_on').innerHTML = "Class1";
  } else {

    if (timer <= 0) {
      document.getElementById('typing_on').innerHTML = "Class2";
    } else {
      setTimeout("reduceTimer();", 500);
    }
  }
}

$("#textarea").keypress(function(evt) {
  isTyping('true')
  timer = 5;
  $("#typing_on").innerHTML = "Class1";
  $("#typing_on").removeClass("class2");
  $("#typing_on").addClass("class1");
  event.preventDefault();
});
$("#textarea").keyup(function(evt) {
  isTyping('true')
  $("#typing_on").innerHTML = "Class2";
  $("#typing_on").removeClass('class1');
  $("#typing_on").addClass("class2");
  event.preventDefault();
});

<textarea id="textarea" cols="45" rows="5">
</textarea>
<div id="typing_on" class="">Class2</div>
.class1 {
  display: block;
  width: 50px;
  height: 20px;
  background-color: red;
}

.class2 {
  display: block;
  width: 50px;
  height: 20px;
  background-color: yellow;
}