change color with if statement jquery

Question

Why the background color doesn't change to green?

var id;
id = setInterval(changeColor, 1000);

function changeColor(){
  var elem= $("#target");         

  var color = elem.css('background-color');
  if (color == 'rgb(255,0,0)')
    elem.css('background-color','green');
  else
    elem.css('background-color', 'red');
}

are you getting any console errors?, is changeColor() even running? — Ramon de Vries, Jun 20 '20 at 09:10
Here is a good read: https://stackoverflow.com/a/60689673/383904 — Roko C. Buljan, Jun 20 '20 at 18:16

Yusef Maali · Answer 1 · 2020-06-20T09:18:43.003

0

Try this:

var id;
id = setInterval(changeColor, 1000);

function changeColor(){
  var elem= $("#target");         

  var color = elem.css('background-color');
  if (color == 'rgb(255, 0, 0)')
    elem.css('background-color','green');
  else
    elem.css('background-color', 'red');
}

the if statement was checking a wrong condition: 'rgb(255,0,0)' vs 'rgb(255, 0, 0)'

edited Jun 20 '20 at 09:18

answered Jun 20 '20 at 09:12

Yusef Maali

2,201
2
23
29

your code is exacly the same – Ramon de Vries Jun 20 '20 at 09:14
nope, the if condition is different, check it carefully – Yusef Maali Jun 20 '20 at 09:15
1

just noticed the .css returns it with spaces. my bad. i was thinking about setting it works without the spaces too – Ramon de Vries Jun 20 '20 at 09:18

prathameshk73 · Answer 2 · 2020-06-20T09:16:21.467

Try to check rgba instead of rgb.

<html>

<head>
    <title>Change Color</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <script>
       function changeColor(){
            var elem= $("#target");         
        
            var color = elem.css('background-color');
            
            if (color == 'rgba(0, 0, 0, 0)')
                elem.css('background-color','green');
            else
                elem.css('background-color', 'red');
           
        }

        $(document).ready(function () {
            var id;
            id = setInterval(changeColor, 1000);
        });
    </script>
</head>

<body>
   <div id="target">Welcome to JavaScript!!!</div>
    <!--.div-row -->


</body>

rgb should work, and if not itll run the else anyway, still showing output — Ramon de Vries, Jun 20 '20 at 09:16

change color with if statement jquery

2 Answers2