Добавьте класс к элементу, используя 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>

Как видите, при нажатии кнопки ничего не происходит. Как я могу это исправить?

Answer 1

Попробуйте добавить пробел в добавленной строке: evt.currentTarget.className + = "active";

Answer 2

Не используйте атрибуты onevent:

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

Использовать свойства onevent или .addEventListener()

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

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

event.currentTarget указывает на тег, зарегистрированный для события. event.target указывает на тег, который был нажат, изменен, завис и т.д. В ОП это одно и то же.

Непонятно, в чем проблема, за исключением того, что не очень полезно застрять в одном состоянии. Возможно, вы хотели, чтобы кнопка чередовалась между двумя цветами?

 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

В вашем коде нет ничего плохого.Проблема в том, что функция не загружалась в ваш jsfiddle.Когда вы нажимали кнопку, она не вызывала вашу функцию.

Если вы щелкнете по заголовку панели Javascript и измените его на Тип загрузки на Без переноса - низ головы вы обнаружите, что оно работает так, как вы хотели.

Answer 4

Я заметил две разные проблемы здесь:

1) classNames должны быть объединены с пробелами, поэтому добавьте пробел перед активным

evt.currentTarget.className += " active";

2) Функция changeColor не может быть найдена из DOM. Это главным образом потому, что ваша функция объявлена ​​под HTML кнопки. Вы можете установить его глобально, используя window.changeColor = или изменив порядок, но я бы порекомендовал использовать addEventListener, чтобы добавить функцию в качестве слушателя. При использовании этого метода вы можете удалить атрибут onclick = "" из DOM.

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