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.
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.
<style type=text/css>
.novice {
background-color: pink;
}
</style>
Here is an array with items I wrote out using a loop. The first item has the class novice
var achievements = ['<span class=novice>novice - 10 or more guesses </span>', ...]
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.
if (timesguessed > 10) {
$('.novice').css('background-color', 'green');
}
Am I typing this above portion right?
I've also tried replacing $('.novice').css('background-color', 'green'); with
$('.novice').background-color(green); , though that's probably wrong.
Even if I print out another line with the supposedly newly modified novice class the text will still not be highlighted in green.
document.write('<span class=novice>novice - 10 or more guesses </span>');
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.
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?
Thanks for the help. Yeah I'm a beginner at javascript/jQuery.
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8 />
<style type=text/css>
.novice {
}
</style>
<script type=text/javascript src=../MM_JAVASCRIPT2E/MM_JAVASCRIPT2E/_js/jquery-1.6.3.min.js></script>
<title>Number Guessing Game</title>
</head>
<body>
<h1 style=text-align:center;> Number Game </br> Try to guess my number that is between 0-1000 </h1>
<script>
// 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 >= 50 ) {
alert(Tundra cold);
timesguessed++;
}
else if ( 30 <= numbertoguess && numbertoguess < 50) {
alert(cold);
timesguessed++;
}
else if ( 20 <= numbertoguess && numbertoguess < 30 ) {
alert(warm);
timesguessed++;
}
else if ( 10 <= numbertoguess && numbertoguess< 20 ) {
alert(hot);
timesguessed++;
}
else if ( 5 <= numbertoguess && numbertoguess < 10 ) {
alert(Steaming hot!);
timesguessed++;
}
else if ( 3 <= numbertoguess && numbertoguess < 5 ) {
alert(SCALDING HOT!);
timesguessed++;
}
else if ( 1 < numbertoguess && numbertoguess < 3 ) {
alert(FIRE!);
timesguessed++;
}
else if ( numbertoguess == 1 ) {
alert(Face Melting!);
timesguessed++;
} else if ( numbertoguess == 0 ) {
alert(BINGO!);
timesguessed++;
}
}
document.write('</br></br></br></br><h2 style=text-align:center; font-size: 18px;> The number was ' + realnumber + '.');
if (timesguessed == 1) {
document.write('</span><h2 style=text-align:center;>It took you ' + timesguessed + ' guess.</h2>');
} else {
document.write('<h2 style=text-align:center;>It took you ' + timesguessed + ' guesses.</h2>');
}
// END LONG BLOCK OF CODE WITH GUESSING GAME MECHANISMS
document.write('</br></br>')
//below is the array written out with a loop
var achievements = ['<span class=novice>novice - 10 or more guesses </span>',bronze - 7-10 guesses', 'silver', 'gold', 'titanium', 'platinum', 'diamond', ]
var counter = 0;
while (counter < achievements.length) {
document.write('<h2 style=text-align:center;>' + achievements[counter] + ' ');
counter++;
}
//below is the if function of question
if (timesguessed > 10) {
$('.novice').css('background-color', '#00FF00'); //why does this not work?
}
document.write('<span class=novice>novice - 10 or more guesses </span>'); //why does this not work?
</script>
</body>
</html>
