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>

如您所见，单击按钮时什么也没有发生。我该如何解决？

Answer 1

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

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>

Answer 3

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

1）classNames应该与空格连接，因此在活动名称前添加一个空格

evt.currentTarget.className += " active";

2）无法从DOM中找到功能changeColor。这主要是因为您的函数是在按钮的HTML下声明的。您可以使用window.changeColor =或更改顺序将其设置为全局，但是我建议使用addEventListener将函数添加为侦听器。使用此方法时，可以从DOM中删除onclick =“”属性。

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

Answer 4

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

如果您单击Javascript面板标题并将其更改为 Load Type ，将其更改为 No wrap-head of bottom ，您会发现它按预期工作。

>

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

4 个答案: