addEventListener to button to change the color of text in the button whet user click

Question

my code is not working. I'm creating a variable then add event listener to it

btnColor=document.getElementById("first");
btnColor.addEventListener('click', changeBtnColor);

then I create a function that change the btn text color to red, if it's bg color is transparent

let changeBtnColor = (btnColor) => {
  if (btnColor.style.backgroundColor == "trasnsparent") btnColor.style.color = "red";
}

and html code

<button type="button" class="first_text" id="first" onclick="changeBtnColor()">text</button>

Answer 1

You are saying this function needs to have btnColor passed in.

let changeBtnColor = (btnColor) => {
  if (btnColor.style.backgroundColor == "trasnsparent") btnColor.style.color = "red";
}

In the inline onclick="changeBtnColor()" you do not pass in the button reference.

In the addEventListener btnColor is the event object.

Next issue is trasnsparent is not transparent

So with addEventListener you want to use currentTarget

const changeBtnColor = (event) => {
  const btn = event.currentTarget;
  console.log(btn);
  console.log(btn.style.backgroundColor);
  if (btn.style.backgroundColor == "transparent") btn.style.color = "red";
}

const btnColor=document.getElementById("first");
btnColor.addEventListener('click', changeBtnColor);

<button id="first" style="background-color:transparent">click</button>

Answer 2

• don't use HTML inline on* handlers like onclick
• place your function initialization up in the script (before calling it)
• don't check for "transparent" (browsers returned value might differ) - instead negate the color you're expecting it to be ("red")

const btnColor = document.getElementById("first");

// Bring on top, otherwise you'll get:
// Uncaught ReferenceError: Cannot access 'changeBtnColor' before initialization
const changeBtnColor = (evt) => {
  // console.log(evt) // that's your event, not the element!
  if (btnColor.style.backgroundColor !== "red") btnColor.style.color = "red";
};

btnColor.addEventListener('click', changeBtnColor);

<button type="button" class="first_text" id="first">text</button>

Since using Element.style should be discouraged whenever possible, it's a better idea to set the styles in CSS and use Element.classList in JS :

const btnColor = document.getElementById("first");

const changeBtnColor = (evt) => {
  btnColor.classList.add("red");
  // or use:
  // btnColor.classList.toggle("red");
};

btnColor.addEventListener('click', changeBtnColor);

.red { color: red; }

<button type="button" class="first_text" id="first">text</button>

Answer 3

You are calling changeBtnColor in two different places and it is wrong for both of them.

---

let changeBtnColor = (btnColor) => {

Your function expects a button element to be passed to it as an argument.

---

btnColor.addEventListener('click', changeBtnColor);

When you bind it as an event listener, the argument passed into it is a MostEvent object.

You can extract the button from it using the target property or the currentTarget property.

When you are binding to an element directly, currentTarget is safer as it will get the element to which the event is bound rather than the one that is actually clicked on. In this particular case, since the button only contains text (i.e. no other elements) they will always be the same.

If you were using event delegation then you would need to use target and combine it with something like closest to see if the element clicked was either the one you wanted or a descendent of it.

let changeBtnColor = (event) => {
    const btnColor = event.currentTarget;
    if (btnColor.style // etc

---

 onclick="changeBtnColor()"

You call it again here, only this time you don't pass any argument to it at all.

Don't use onclick attributes. It's the 21st century now.

---

Then you have a second problem:

btnColor.style.backgroundColor == "trasnsparent")

This will never be true because:

• You misspelt transparent
• Nothing ever sets the inline style to transparent (and style accesses the inline style, not the computed style).
• The default background colour for buttons isn't transparent anyway

In general, when dealing with style in JS, it's usually a good idea to modify the classes applied to the element and style them with CSS.

const changeBtnColor = (event) => {
  const btn = event.currentTarget;
  btn.classList.toggle('example_class');
}

document.getElementById('first').addEventListener('click', changeBtnColor);

.example_class {
  background: red;
}

<button type="button" class="first_text" id="first">text</button>