Javascript 函数未切换如何解决此问题？

当元素第一次单击时，其颜色应变为红色。那部分有效。当第二次单击元素时，它应该变为黑色，它的初始默认颜色，等等。那是不起作用的部分。一旦元素变为红色，它将保持该“状态”

函数切换类（）{
var monday=document.getElementById（“星期一”）；
星期一。类列表。添加（“红色”）；
星期一。类列表。删除（“红色”）；
这个.classList.toggle（“红色”）；
}
星期一。addEventListener（“单击”，切换类）

.greenColor{
颜色：绿色；
}
.红颜色{
颜色：红色；
}

练习应用程序
星期一

您只需要切换，它将为您切换类-您不需要添加或删除：

monday.classList.toggle（“红色”）

例如：

function toggleClass() {
  var monday = document.getElementById("monday");
  monday.classList.toggle("redColor");
}


函数切换类（）{
var monday=document.getElementById（“星期一”）；
星期一.classList.toggle（“红色”）；
}
星期一。addEventListener（“单击”，切换类）
.greenColor{
颜色：绿色；
}
.红颜色{
颜色：红色；
}

练习应用程序
星期一

DOMTokenList接口的
toggle（）
方法从列表中删除给定的令牌并返回
false
。如果令牌不存在，则添加该令牌，函数返回
true

您不需要使用
add（）
和
remove（）
，只需使用
toggle（）
即可

另外，由于
此
关键字指的是当前单击的元素，因此我认为您不需要在此处按id获取元素：


函数切换类（）{
这个.classList.toggle（“红色”）；
}
星期一。addEventListener（“单击”，切换类）
.redColor{
颜色：红色；
}
.绿色{
颜色：绿色；
}
周一
您不需要这两条说明：

monday.classList.add("redColor");
monday.classList.remove("redColor");

只要切换一下就足够了。另外，如果您已经在变量
monday
中捕获了div，则不需要引用
此
：

function toggleClass() {
  var monday = document.getElementById("monday");
  monday.classList.toggle("redColor");
}
monday.addEventListener("click", toggleClass)

这应该能奏效

这里有一支笔来说明：
只需切换
this.classList.toggle（“红色”）