JavaScript点击元素添加class功能不生效问题求助

存在两个核心问题导致效果无法实现：

• JS逻辑错误：内联事件调用函数时，函数内部this默认指向全局window对象，而非触发点击的DOM元素。你在HTML的onclick中传入了当前元素作为实参，但JS函数没有定义形参接收该元素，无法正确操作目标元素的类列表。
• CSS优先级冲突：ID选择器的优先级远高于类选择器，哪怕成功给元素添加了myclass类，#first定义的样式权重更高，会覆盖.myclass的样式，也看不到预期的颜色变化。

1. 调整JS代码 #

接收传入的元素参数，同时可以用toggle方法实现点击添加/移除类的切换效果，更贴合需求：

function myFunction(el) {
    el.classList.toggle("myclass");
}

2. 调整CSS优先级 #

修改类选择器写法，提升优先级确保可以覆盖ID选择器的样式：

#first {
  height: 100px;
  width: 100px;
  background: yellow;
  color: black;
}

#first.myclass {
    background: red;
    color: white;
}

调整后HTML代码无需改动，即可实现点击切换样式的效果。

内容的提问来源于stack exchange，提问作者user779681