Changing background-color property of a class with

2019-06-20 04:26发布

站内问答 / JavaScript
841 3 4

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>

3条回答
我命由我不由天
2楼-- · 2019-06-20 04:57

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

查看更多
0人赞 添加讨论(0) 举报
爷的心禁止访问
3楼-- · 2019-06-20 05:19

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
查看更多
0人赞 添加讨论(0) 举报
太酷不给撩
4楼-- · 2019-06-20 05:24

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)