jQuery element is not changing text color when clicked

Question

My code is not changing the text color of the label element to #ffffff. No errors are logged.

JS Code

$(document).ready(() => {
  $('.label').on("click", () => {
    $(this).css("color", "#ffffff")
  })
})

HTML Code

<div id="q1">
  <img src="lizerds/l2.jpeg" class="img"/>
        <div>
          <div class="radioWrapper">
            <label class="label">
              <input type="radio" id="q1Snake" class="radio" name="q1radio">
              Snake
            </label>
          </div>
          <div class="radioWrapper">
            <label class="label">
              <input type="radio" id="q1Lizard" class="radio" name="q1radio">
              Legless Lizard
            </label>
          </div>
        </div>
      </div>

Does this answer your question? [Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?](https://stackoverflow.com/questions/34361379/are-arrow-functions-and-functions-equivalent-interchangeable) — freedomn-m, May 19 '21 at 13:11

score 0 · Answer 1 · answered May 19 '21 at 12:54

You can not use this in an anonymous function to refer to the local instance. Change the arrow function to a "function" and your code will work as expected:

$(document).ready(() => {
  $('.label').on("click", function() {
    $(this).css("color", "red")
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="q1">
  <img src="lizerds/l2.jpeg" class="img"/>
        <div>
          <div class="radioWrapper">
            <label class="label">
              <input type="radio" id="q1Snake" class="radio" name="q1radio">
              Snake
            </label>
          </div>
          <div class="radioWrapper">
            <label class="label">
              <input type="radio" id="q1Lizard" class="radio" name="q1radio">
              Legless Lizard
            </label>
          </div>
        </div>
      </div>

score 0 · Accepted Answer · answered May 19 '21 at 13:06

You are almost there. Use currentTarget to catch current element.

Note: Please avoid inline CSS, instead of inline use class.

$(document).ready((elm) => {
  $('.label').on("click", (elm) => {
    var $this = $(elm.currentTarget);
    $('.label').removeClass('yourClss'); // Remove previous added class before add class in current markup
    $this.addClass('yourClss')
  })
})

.yourClss {
  color: #ffffff
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="q1">
  <img src="lizerds/l2.jpeg" class="img" />
  <div>
    <div class="radioWrapper">
      <label class="label">
              <input type="radio" id="q1Snake" class="radio" name="q1radio">
              Snake
            </label>
    </div>
    <div class="radioWrapper">
      <label class="label">
              <input type="radio" id="q1Lizard" class="radio" name="q1radio">
              Legless Lizard
            </label>
    </div>
  </div>
</div>

I will not avoid inline CSS. I tried using addClass/removeClass and it isn't working. I don't care about solving this issue and will stick with inline css, considering this project is a joke program. — , May 19 '21 at 13:31

score -1 · Answer 3 · answered May 19 '21 at 12:56

-1

This problem is happening because you're trying to achieve this context with an arrow function.
As the official MDN documentation says:

Arrow function: "Does not have its own bindings to this or super, and should not be used as methods."

You should be doing this:

$(document).ready(() => {
  $('.label').on("click", function() {
    $(this).css("color", "#ffffff")
  })
})

Instead of this

$(document).ready(() => {
  $('.label').on("click", () => {
    $(this).css("color", "#ffffff")
  })
})

answered May 19 '21 at 12:56

Felipe Malara

1,796
1
7
13

You might like to review your "do this instead of this" code... – freedomn-m May 19 '21 at 13:13
To use `this` use `function()` - if you change your code to `$(".label").css` (which I'm *guessing* you mean) then it will affect every label. – freedomn-m May 19 '21 at 13:13

score -1 · Answer 4 · answered May 19 '21 at 13:14

-1

You have to catch current element in your function. Please use this code

$(document).ready((elem) => {
$('.label').on("click", (elem) => {
var current = $(elem.currentTarget);
$(current).css("color","#ffffff");
})
})

answered May 19 '21 at 13:14

Harkirat singh

599
6
19

jQuery element is not changing text color when clicked

4 Answers4