Changing background-color property of a class with javascript/jQuery

Question

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>

You explained your question very well and it's appreciated; however, I'd like to know what event invokes the if(timeguessed >10) statement. Is this a click function, a change function, load function? For sanity's sake, I've outlined the core principals of your issue and made a working jsFiddle for you. — Ohgodwhy
– Ohgodwhy, Commented Jul 5, 2012 at 3:06
I'd say there's nothing wrong with that code and the only thing I can think of is that if (timeguessed > 10) never actually evaluates to true. Are you absolutely positively sure it does? (Just stick an alert() in there to make sure). I'd also recommend that instead of changing the background-color in jQuery, add or change the class of the element and keep all your styling in CSS files. — powerbuoy
– powerbuoy, Commented Jul 5, 2012 at 3:15
I don't have it in a function. Should I? Thanks for the jsFiddle, it's great. Yes I'm sure that timesguessed is greater than 10 because I have timesguessed printed out for me before that specific if statement. I've added my entire code above if it helps........ — LazerSharks
– LazerSharks, Commented Jul 5, 2012 at 3:24
That looks like the only place in the page you use jQuery...are you sure it's included correctly? Checking your console will tell you if the link failed (and should also say if $ is undefined). To use the latest version from google use this link: ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js — nbrooks
– nbrooks, Commented Jul 5, 2012 at 3:41
Calling a method on an undefined object would cause an error, and execution of subsequent code will fail — nbrooks
– nbrooks, Commented Jul 5, 2012 at 3:43

Oleg · Accepted Answer · 2012-07-05 03:56:01Z

3

.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.

answered Jul 5, 2012 at 3:56

Oleg

25.1k8 gold badges64 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vignesh Subramanian · Accepted Answer · 2015-02-26 05:14:30Z

2

You can do it in following ways STEP 1

   var imageUrl= "URL OF THE IMAGE HERE";
   var BackgroundColor="RED"; // what ever color you want

for elements with same class

var elements = document.getElementsByClassName("ClassName")
            for (var i = 0; i < elements.length; i++) {
                elements[i].style.background=imageUrl; 
                //if you want to change bg image
                //if you want to change bg color
                elements[i].style.backgroundColor=BackgroundColor ;
            }

To change an element with ID

document.getElementById("ElementId").style.backgroundImage=imageUrl
document.getElementById("ElementId").style.backgroundColor=BackgroundColor

answered Feb 26, 2015 at 5:14

Vignesh Subramanian

7,31915 gold badges97 silver badges161 bronze badges

Comments

nbrooks · Accepted Answer · 2012-07-05 03:51:26Z

0

jQuery is not being included in the page correctly. Checking your console will tell you if the link failed (and should also say that $ is undefined). To use the latest version from google use this link: http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js

i.e. Change this:

<script type="text/javascript" src="../MM_JAVASCRIPT2E/MM_JAVASCRIPT2E/_js/jquery-1.6.3.min.js"></script>

to this

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

Calling a method on an undefined object would cause an error, and execution of subsequent code will fail.

answered Jul 5, 2012 at 3:51

nbrooks

18.2k5 gold badges58 silver badges68 bronze badges

Collectives™ on Stack Overflow

Changing background-color property of a class with javascript/jQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related