これは単純な問題のように見えますが、何も修正されていません。javascript / jQueryを使用して、一部のテキストの背景色（白またはピンクから緑）を動的に変更しようとしていますが、何らかの理由で機能しません。テキストは「.novice」と呼ばれるCSSクラスでスタイル設定されます。
これがCSSです。簡単だ。また、background-colorを完全に削除してみたので、background-colorがまだ設定されていません。
<style type="text/css">
.novice {
background-color: pink;
}
</style>
これは、ループを使用して書き出した項目の配列です。最初のアイテムは「初心者」クラスです
var achievements = ['<span class="novice">novice - 10 or more guesses </span>', ...]
以下はifステートメントです。これは、trueの場合、「。novice」クラスに「background-color：green」プロパティを持たせ、「novice-10以上の推測」を緑色で強調表示することになっています。私は、変数timesguesedが正しく設定され、正しいスペルになっていることを確信しています。ただし、timesguesedが10より大きい場合でも、「初心者...」は緑色で強調表示されません。
if (timesguessed > 10) {
$('.novice').css('background-color', 'green');
}
私はこれを上の部分で正しく入力していますか？ $（'。novice'）。css（'background-color'、'green'）;も置き換えてみました。$（'。novice'）。background-color（green）;を使用します。、それはおそらく間違っていますが。
新しく変更されたと思われる「初心者」クラスで別の行を印刷しても、テキストは緑色で強調表示されません。
document.write('<span class="novice">novice - 10 or more guesses </span>');
元のCSS.noviceクラスが機能していることはわかっています。これは、推測された時間が10より大きいか小さいかに関係なく、テキストがピンクで強調表示されるためです。
JavascriptがCSSクラスを変更していないのか、それとも何なのかわかりません。それとも、何か他のものがそれをオーバーライドしているのでしょうか？
助けてくれてありがとう。ええ、私は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>