javascript - Using JQuery To Change Color -
javascript - Using JQuery To Change Color -
i have game have been working on here, alter td click on color dependent on variable. want variable randomly chosen between 2 strings, either 'lime' or 'red' have part down. problem applying css td's, far can tell, doing correctly, doesn't seem work.
class="snippet-code-js lang-js prettyprint-override">$().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);
class="snippet-code-css lang-css prettyprint-override">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;}
class="snippet-code-html lang-html prettyprint-override"><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 2 things wrong are:
the $(this).css('background-color:'+color); not changing background color the $(this).css('color:'+color); not changing text colorthanks help!
not quite right:
$(this).css('background-color', color);
the above, perhaps obviously, assumes the color
variable set valid css color-string.
it seems trying pass string, perhaps style
attribute; instead css()
method offers 2 approaches, 'property','value'
:
css('background-color', 'red');
or object of property-values:
css({ 'background-color' : 'red' });
references:
css: basic color keywords. extended color keywords. jquery:css()
. javascript jquery html css
Comments
Post a Comment