Menu
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>
906
To add the background color, we use css() method. The css() method in JQuery is used to change style property of the selected element. The css() in JQuery can be used in different ways. The css() method can be used to check the present value of the property for the selected element.
The background-color CSS property sets the background color of an element.
attr("data-color"); $("."+class). css("background-color",color); }); . button is the class to apply to the button, add data-class for the class you would like to change the background color of, and data-color is the color you would like to change it to.
.css() in your code changes the style of elements that are already on the page by adding inline styles to them - not by modifying the css rule.
You can add a new rule at runtime like so:
$('head').append('<style type="text/css">.novice{color:green;}</style>');
I am not a proponent of such modifications though. I'd much rather see css like
.novice {background-color: pink;}
.over-ten-guesses .novice {background-color:green;}
After that you can toggle the .over-ten-guesses class with Javascript on any container element that has .novice as its descendant.
55
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
