CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Xavier Horn
Xavier Horn

Reputation: 123

Using JQuery To Change Color

I have a game I have been working on here, that will change a td you click on to a color dependent on a variable. I want this variable to be randomly chosen between two strings, either 'lime' or 'red' I have that part down. The problem is applying the CSS to the td's, as far as I can tell, I am doing it correctly, but it doesn't seem to work. 

$().ready(function(){
  //Functions
  $('td').click(function(){
    if($(this).hasClass('block')) return;
    $(this).addClass(color);
    $(this).addClass('block');
    $(this).css('background-color:'+color);
    tilesLeft--;
    if(color=='lime'){color='red';}else{color='lime';}
  });
  
  //Variables
  var color;
  var tilesLeft = 9;
  
  //Setup
  if(Math.round(Math.random())==0){color='lime';}else{color='red';}
});

//Intervals
setInterval(function(){
  $('header').css('color:'+color);
},1);
html, body {
  background-color:black;
  color:white;
  text-align:center;
  height: 100%;
}
td {
  border: 1px solid white;
  margin:1px;
  width:30%;height:30%;
}

#board {height:500px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>Tic Tac Toe</header>
<table style='width:100%;height:95%;'>
  <tr><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td></tr>
</table>

The two things that are wrong with this are:

Thanks for the help!

Upvotes: 0

Views: 1765

Answers (2)

Bojan Petkovski
Bojan Petkovski

Reputation: 6933

Here you are, change

$(this).css('background-color:'+color);

to 

$(this).css({
  backgroundColor: color
});

and 

$('header').css('color:'+color);

to

 $('header').css({
    color: color
 });

Put your interval inside the ready state :)

And it will work :)

$(document).ready(function() {
  //Functions
  $('td').click(function() {
    if ($(this).hasClass('block')) return;
    $(this).addClass(color);
    $(this).addClass('block');
    $(this).css({
      backgroundColor: color
    });
    tilesLeft--;
    if (color == 'lime') {
      color = 'red';
    } else {
      color = 'lime';
    }
  });

  //Variables
  var color;
  var tilesLeft = 9;

  //Setup
  if (Math.round(Math.random()) == 0) {
    color = 'lime';
  } else {
    color = 'red';
  }

  //Intervals
  setInterval(function() {
    $('header').css({
      color: color
    });
  }, 1);
});
html,
body {
  background-color: black;
  color: white;
  text-align: center;
  height: 100%;
}
td {
  border: 1px solid white;
  margin: 1px;
  width: 30%;
  height: 30%;
}
#board {
  height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>Tic Tac Toe</header>
<table style='width:100%;height:95%;'>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Upvotes: 1

David Thomas
David Thomas

Reputation: 253308

Not quite right:

$(this).css('background-color', color);

The above, perhaps obviously, assumes that the the color variable is successfully set to a valid CSS color-string.

It seems you were trying to pass a string, perhaps to the style attribute; instead the css() method offers two approaches, a 'property','value':

css('background-color', 'red');

Or an object of property-values:

css({
    'background-color' : 'red'
});

References:

Upvotes: 1

Related Questions