Javascript 使用event.currentTarget.className将类添加到元素

我有一个黄色背景的按钮，单击该按钮后，我希望它变为黑色（）。我试图用一个js函数和一个

按钮.active

css类来实现这一点（我从未见过

.active

，但我试图遵循一个W3Schools教程）

函数更改颜色（evt）{
evt.currentTarget.className+=“活动”；
}

.tab按钮{
背景颜色：黄色；
}
/*创建活动/当前tablink类*/
.tab按钮。激活{
背景色：红色；
}

点击我

尝试在附加的字符串中预挂起一个空格：evt.currentTarget.className+=“active”

我在这里注意到两个不同的问题：

1） 类名应该与空格连接，所以在激活前添加一个空格

evt.currentTarget.className += " active";

2） 在DOM中找不到函数changeColor。这主要是因为函数是在按钮的HTML下声明的。您可以通过使用

window.changeColor=

或更改顺序将其设置为全局，但我建议使用

addEventListener

将函数添加为侦听器。使用此方法时，可以从DOM中删除onclick=“”属性

document.querySelector('button').addEventListener('click', changeColor);

---

你的代码没有问题。您遇到的问题是没有在JSFIDLE中加载该函数。当您单击按钮时，它无法调用您的函数

---

如果单击Javascript面板标题并将其更改为“加载类型”为“不换行-标题底部”，您将发现它可以按预期工作。

不要使用OneEvent属性：

 <button onclick="lame()">...

event.currentTarget

指向已注册到事件的标记。

event.target

指向被单击、更改、悬停等的标记。。。 在OP中，它是同一个

目前还不清楚问题出在哪里，只是停留在一种状态并没有多大用处。也许你想让按钮在两种颜色之间切换

 evt.target.classList.toggle("active");

函数更改颜色（evt）{
evt.target.classList.toggle（“活动”）；
}
document.querySelector（'button'）。onclick=changeColor
.tab按钮{
背景颜色：黄色；
}
.tab按钮。激活{
背景色：红色；
}

点击我
我从您的代码中创建了一个片段，它在某种程度上起作用。JSFiddler上的问题是无法从内联脚本访问
changeColor
。这与JSFiddler的设置方式有关。我用这两个更改更新了您的fiddle，它似乎起到了作用：我只需在字符串“active”前面加一个空格，就可以让我的特定示例起作用。然而，我从这个答案中学到了比我预期的多得多的东西，谢谢。
 evt.target.classList.toggle("active");