title: Changing background-color property of a class with javascript/jQuery
body: <p>This seems like a simple problem but nothing nothing is fixing it. I'm trying to dynamically change the background-color (from white or pink to green) on some text with javascript/jQuery but for some reason it's not working. The text is styled with a CSS class called ".novice".</p>
  
  <p>Here's the CSS. It's simple. I've also tried removing background-color completely so it does not already have a set background-color.</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  .novice {
  background-color: pink;
  }
  
  &lt;/style&gt;
  </code></pre>
  
  <p>Here is an array with items I wrote out using a loop. The first item has the class "novice"</p>
  
  <pre><code>var achievements = ['&lt;span class="novice"&gt;novice - 10 or more guesses &lt;/span&gt;', ...]
  </code></pre>
  
  <p>Below is an if statement, which if true, is supposed to make the ".novice" class have a "background-color: green" property and make "novice - 10 or more guesses" be highlighted in green. I'm positive that I have the variable timesguessed set up correctly and spelled right. However when timesguessed is greater than 10, "novice..." will still not be highlighted in green. </p>
  
  <pre><code>if (timesguessed &gt; 10) {
      $('.novice').css('background-color', 'green'); 
  }
  </code></pre>
  
  <p><strong>Am I typing this above portion right?</strong>
  I've also tried replacing $('.novice').css('background-color', 'green'); with 
  $('.novice').background-color(green); , though that's probably wrong.</p>
  
  <p>Even if I print out another line with the supposedly newly modified "novice" class the text will still not be highlighted in green.</p>
  
  <pre><code>document.write('&lt;span class="novice"&gt;novice - 10 or more guesses &lt;/span&gt;'); 
  </code></pre>
  
  <p>I know that the original CSS .novice class is working because the text will be highlighted in pink if no matter if timesguessed is greater or less than 10.</p>
  
  <p>I'm not sure if the Javascript is not modifying the CSS class, or what. Or maybe it does just something else is overriding it?</p>
  
  <p>Thanks for the help. Yeah I'm a beginner at javascript/jQuery.</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;style type="text/css"&gt;
  .novice {
  }
  
  &lt;/style&gt;
  &lt;script type="text/javascript" src="../MM_JAVASCRIPT2E/MM_JAVASCRIPT2E/_js/jquery-1.6.3.min.js"&gt;&lt;/script&gt;
  
  &lt;title&gt;Number Guessing Game&lt;/title&gt;
  
  
  &lt;/head&gt;
  
      &lt;body&gt;
      &lt;h1 style="text-align:center;"&gt; Number Game &lt;/br&gt; Try to guess my number that is between 0-1000 &lt;/h1&gt;
      &lt;script&gt;
  // BEGIN LONG BLOCK OF CODE WITH GUESSING GAME MECHANISMS. You can ignore this part I think, this part works.
      var realnumber = prompt('Player 1, please enter a number for Player 2 to guess then hand it off to Player 2.', '');
      while (isNaN(realnumber)) {
          realnumber = prompt('Player 1, please enter a NUMBER, dimwit, for Player 2 to guess.', '');}
      var timesguessed=0;
      while (numbertoguess != 0) {
      var numbertoguess = prompt("Player 2, guess a number", "");
      while (isNaN(numbertoguess)) {
          numbertoguess = prompt('Please, type in a number');} // why don't I need an "else" here?
      numbertoguess = Math.abs(numbertoguess - realnumber);
          if ( numbertoguess &gt;= 50 ) {
          alert("Tundra cold");
          timesguessed++;
          }
      else if ( 30 &lt;= numbertoguess &amp;&amp; numbertoguess &lt; 50) {
          alert("cold");
          timesguessed++;
          }
      else if ( 20 &lt;= numbertoguess &amp;&amp; numbertoguess &lt; 30 ) {
          alert("warm");
          timesguessed++;
          }
      else if ( 10 &lt;= numbertoguess &amp;&amp; numbertoguess&lt; 20 ) {
          alert("hot");
          timesguessed++;
      }
      else if ( 5 &lt;= numbertoguess &amp;&amp; numbertoguess &lt; 10 ) {
          alert("Steaming hot!");
          timesguessed++;
          }
      else if ( 3 &lt;= numbertoguess &amp;&amp; numbertoguess &lt; 5 ) {
          alert("SCALDING HOT!");
          timesguessed++;
      }
      else if ( 1 &lt; numbertoguess &amp;&amp; numbertoguess &lt; 3 ) {
          alert("FIRE!");
          timesguessed++;
      }
      else if ( numbertoguess == 1 ) {
          alert("Face Melting!");
          timesguessed++;
      } else if ( numbertoguess == 0 ) { 
          alert("BINGO!");
          timesguessed++;
      }
      }
      document.write('&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;h2 style="text-align:center; font-size: 18px;"&gt; The number was ' + realnumber + '.');
      if (timesguessed == 1) {
          document.write('&lt;/span&gt;&lt;h2 style="text-align:center;"&gt;It took you ' + timesguessed + ' guess.&lt;/h2&gt;');
      } else {
      document.write('&lt;h2 style="text-align:center;"&gt;It took you ' + timesguessed + ' guesses.&lt;/h2&gt;');
      }
  
  // END LONG BLOCK OF CODE WITH GUESSING GAME MECHANISMS
  
  
      document.write('&lt;/br&gt;&lt;/br&gt;')
  //below is the array written out with a loop
      var achievements = ['&lt;span class="novice"&gt;novice - 10 or more guesses &lt;/span&gt;',bronze - 7-10 guesses', 'silver', 'gold', 'titanium', 'platinum', 'diamond', ]
      var counter = 0;
          while (counter &lt; achievements.length) {
          document.write('&lt;h2 style="text-align:center;"&gt;' + achievements[counter] + ' ');
          counter++;
          }
  //below is the "if" function of question
      if (timesguessed &gt; 10) {
          $('.novice').css('background-color', '#00FF00'); //why does this not work?
      }
      document.write('&lt;span class="novice"&gt;novice - 10 or more guesses &lt;/span&gt;'); //why does this not work?
  
      &lt;/script&gt;
  
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>