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

Question

我有一个黄色背景的按钮，单击该按钮后我希望它变成黑色（ https://jsfiddle.net/dcq5v6hy/1/ ）。我正在尝试使用 js 函数和 button.active css 类（我从未见过 .active ，但我正在尝试遵循 W3Schools 教程）。

 function changeColor(evt) {
  evt.currentTarget.className += "active";
}

 .tab button {
  background-color: yellow;
}

/* Create an active/current tablink class */

.tab button.active {
  background-color: red;
}

 <div class="tab">
  <button onclick="changeColor(event)">Click Me</button>
</div>

如您所见，单击按钮时没有任何反应。我怎样才能解决这个问题？

原文由 Justin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

尝试在附加字符串中添加一个空格：evt.currentTarget.className += “active”;

原文由 Chad.Glazier 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

不要使用 onevent 属性：

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

使用一个事件属性或 .addEventListener()

  document.querySelector('button').onclick = notLame;

 document.querySelector('button').addEventListener('click', notLame)

event.currentTarget 指向注册到事件的标记。 event.target 指向被点击、更改、悬停等的标签…在 OP 中是一样的。

目前还不清楚问题出在哪里，只是停留在一种状态不是很有用。也许您希望按钮在两种颜色之间交替？

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

 function changeColor(evt) {
  evt.target.classList.toggle("active");
}

document.querySelector('button').onclick = changeColor;

 .tab button {
  background-color: yellow;
}

.tab button.active {
  background-color: red;
}

 <div class="tab">
  <button>Click Me</button>
</div>

原文由 zer00ne 发布，翻译遵循 CC BY-SA 4.0 许可协议