All geek questions in one place

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

This seems like a simple problem, but nothing fixes it. I am trying to dynamically change the background color (from white or pink to green) to some text using javascript / jQuery, but for some reason it does not work. The text has a CSS style called .novice.

Here is the CSS. It's simple. I also tried to completely remove the background color, so that it does not yet have the background color set.

<style type="text/css"> .novice { background-color: pink; } </style>

Here is an array with elements that I wrote using a loop. The first element has a novice class

 var achievements = ['<span class="novice">novice - 10 or more guesses </span>', ...]

The following is an if statement, which, if true, assumes that the ".novice" class has the property "background-color: green" and makes the "newbie - 10 or more guesses" highlighted in green. I am sure that I have the correct time setting and the correct recording. However, when the wait time is greater than 10, the "newbie ..." will still not be highlighted in green.

 if (timesguessed > 10) { $('.novice').css('background-color', 'green'); }

Am I printing this part above? I also tried replacing $ ('. Novice'). Css ('background-color', 'green'); with $ ('novice') background color (green)., although this is probably wrong.

Even if I print another line with a presumably recently changed 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 works because the text will be highlighted in pink if it doesn't matter if the time is exceeded or less than 10.

I'm not sure that Javascript does not change the CSS class, or what. Or maybe he is doing something else to redefine it?

Thanks for the help. Yes, I am new to 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>
+6
source share
3 answers

jQuery is not entering the page correctly. Checking your console will tell you if the link was unsuccessful (and it should also be said that $ is undefined). To use the latest google version, 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 that

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

Calling a method in an undefined object will result in an error, and subsequent code execution will fail.

0
source

.css() in your code changes the style of elements that are already on the page, adding inline styles to them - not by changing the css rule.

You can add a new rule at runtime as follows:

 $('head').append('<style type="text/css">.novice{color:green;}</style>');

However, I am not a supporter of such modifications. I would rather look at css as

 .novice {background-color: pink;} .over-ten-guesses .novice {background-color:green;}

After that, you can switch the .over-ten-guesses from Javascript to any element in the container that has .novice as its descendant.

+3
source

You can do it as follows STEP 1

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

for elements with one 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 item with an identifier

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

Source: https://habr.com/ru/post/919717/

More articles:


All Articles