I have a button with a yellow background, upon clicking the button I would like it to turn black(/). I am trying to do this with a js function and a button.active css class (I have never seen .active, but I am trying to follow a W3Schools tutorial).

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>

I have a button with a yellow background, upon clicking the button I would like it to turn black(https://jsfiddle/dcq5v6hy/1/). I am trying to do this with a js function and a button.active css class (I have never seen .active, but I am trying to follow a W3Schools tutorial).

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>

As you can see, nothing happens when the button is clicked. How can I fix this?

• javascript
• dom-events

• I've created a snippet from your code and it works somewhat. The problem on JSFiddler is that your changeColor can't be accessed from the inline script. It has to to with how JSFiddler is setup. – Titus Commented May 17, 2019 at 19:43

4 Answers 4

Try preppending a space in the appended string: evt.currentTarget.className += " active";

I noticed two different issues here:

1) classNames should be joined with spaces, so add a space before active

evt.currentTarget.className += " active";

2) The function changeColor cannot be found from the DOM. This mainly because your function is declared under the button's HTML. You could set it global by using window.changeColor = or changing the order, but I would remend using addEventListener to add the function as a listener. When using this method, you can remove the onclick="" attribute from the DOM.

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

Don't use onevent attributes:

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

Use onevent properties or .addEventListener()

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

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

event.currentTarget points to the tag that's registered to the event. event.target points to the tag that was clicked, changed, hovered over, etc... In OP it is one and the same.

It's not clear as to what the problem is except that it's not very useful being stuck in one state. Perhaps you wanted the button to alternate between the two colors?

 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>

There's nothing wrong with your code. The issue you have is that the function wasn't being loaded in your jsfiddle. When you clicked the button it was failing to call your function.

If you click on the Javascript panel header and change it to the Load Type to No wrap - bottom of head you will find it works as you intended.