jquery css color change back and fortfh

Question

I want to change a color of a paragraph when a button is clicked. Click the button , p goes to green, click again, p goes to red..... Why does my code not work?

window.onload = function() {

  $('p').css('color', 'rgb(255,0,0)')

  $('#button').click(function() {
    color = $('p').css('color')
    if (color == 'rgb(255,0,0)') {
      $('p').css('color', 'green')

    } else {
      $('p').css('color', 'red')

    }
  })
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Will try my jquery in this paragraph</p>
<button type="button" id="button">Click!</button>

It works for me in Chrome if I add spaces after the commas: color == 'rgb(255, 0, 0)' — Blazemonger
– Blazemonger, Commented Jan 9, 2018 at 22:25

Blazemonger · Accepted Answer · 2018-01-09 23:02:31Z

2

It works for me in Chrome if I add spaces after the commas: color == 'rgb(255, 0, 0)'

Since different browsers may return different strings for the color, the easiest thing to do in this case might be to save the string returned by .css('color') immediately after it's set, and then compare the color variable to that:

window.onload = function() {

  $('p').css('color', 'rgb(255,0,0)');
  var match_red = $('p').css('color'); // save for matching

  $('#button').click(function() {
    color = $('p').css('color');
    if (color == match_red) {
      $('p').css('color', 'green');
    } else {
      $('p').css('color', 'red');
    }
  })
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<p>Will try my jquery in this paragraph</p>
<button type="button" id="button">Click!</button>

That said, your code would be cleaner and easier to debug if you toggled CSS classes instead:

window.onload = function() {

  $('#p').addClass('red'); // let's use a unique ID, too

  $('#button').click(function() {
      $('#p').toggleClass('red green');
  })
}

.red {
  color: red;
}

.green {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<p id="p">Will try my jquery in this paragraph</p>
<button type="button" id="button">Click!</button>

edited Jan 9, 2018 at 23:02

answered Jan 9, 2018 at 22:28

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

UncaughtTypeError Over a year ago

Yep, this is the way to do it. I would also touch on using the console log more often to output variable values for the sake of troubleshooting in instances such as these - in my testing, console.log(color) had output the value of rgb(255, 0, 0) making it clear at a glance that this would fail the conditional check against the value of rgb(255,0,0) with no spaces after commas.

F. Lins · Accepted Answer · 2018-01-09 22:33:24Z

2

expanding on @ecasparello comment, you should be able to do:

window.onload = function() {
  $('#button').click(function() {
    $('p').toggleClass("green red");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<p class="green">Will try my jquery in this paragraph</p>
<button type="button" id="button">Click!</button>

answered Jan 9, 2018 at 22:33

F. Lins

6345 silver badges14 bronze badges

1 Comment

blurfus Over a year ago

you beat me to it :)

blurfus · Accepted Answer · 2018-01-09 22:36:50Z

1

As mentioned, you can toggle a class instead.

Advantages: you can toggle more properties than just the colour this way. I.e. font size, background color, borders, etc.

See demo below

$(function() {
  $('p').addClass('red');

  $('#button').on('click', function() {
      $('p').toggleClass('blue red');
  });
});

.blue {
  color: blue;
}

.red {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Will try my jquery in this paragraph</p>
<button type="button" id="button">Click!</button>

answered Jan 9, 2018 at 22:36

blurfus

14.1k9 gold badges63 silver badges69 bronze badges

1 Comment

UncaughtTypeError Over a year ago

Clean and easy on the eyes.

Collectives™ on Stack Overflow

jquery css color change back and fortfh

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related