jQuery - Change the CSS of an Element Using jQuery

Tell us what’s happening:
The below jQuery function changes the target1 button text color to red, but it fails when running the test, although the code seems quite right to me. What do you suggest? Am I doing something wrong?

Your code so far


<script>
  $(document).ready(function() {
    $("#target1").css("color", "red");
  });
</script>

<!-- Only change code above this line. -->

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.109 Safari/537.36.

2 Likes

Did you change the code that was already there? You should leave the code as is, and only add your new code to change target1 to red.

reset your code and only add the new the new code.

1 Like

You can use jQuery CSS method:

$("#target1").css("color", "orange");

If it’s not doing the change make sure to inspect the target1 element using developer tools of your browser.

1 Like

I do apologise for my late response, regarding my issue I found out that there was anything wrong with my code, the issue has been caused by one of my Google extensions that changes the colour of the page visualised to simulate a “dark mode”, therefore, even if the text was set to red, my code did not pass the test because the test validation was expecting a text set to the proper “red” value.
I hope this can be useful for others that use these sort of extensions.
Thank you for your help.

5 Likes

This just saved me. I was having the EXACT same issue.

Same issue here: because of my dark mode extension, it kept telling me my code was wrong.