Question 197686 in Html Question posted in
Some basic documentation can be found here.

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

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>
Tags:

4

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    There are a few issues in your code that are preventing it from working correctly. Let’s go through the problems and provide the necessary fixes:

    The event listener is added to the button before the changeBtnColor function is defined. This will result in an error because the function doesn’t exist yet. To fix this, you can rearrange your code so that the function is defined before adding the event listener.

    In the HTML code, you are trying to call the changeBtnColor function directly from the onclick attribute. However, since the function expects an argument (btnColor), you need to modify the way you call it. Instead of using onclick="changeBtnColor()", you can remove the onclick attribute from the HTML and let the event listener handle the click event.

    HTML:

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

    JS:

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

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

btnColor.addEventListener('click', function() {
  changeBtnColor(btnColor);
});
    Login or Signup to reply.
  3. 0
    • 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>
    Login or Signup to reply.
  4. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search