我是 javascript 的新手，有一个我认为非常简单的问题，但无论我想做什么，我都无法解决这个问题。我正在制作一个垄断游戏，我想在玩家掷骰子后更改玩家当前位置的背景颜色。所有位置都是按钮，所有按钮都有 ID，并且所有按钮都有蓝色背景。 我试图给它一个'!重要'，但没有运气。 即使使用 .css() 和 jQuery，我也尝试过这样做，但无济于事，
这是我的一些代码:
<html>
<head>
<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>
<link href="Style.css" rel="stylesheet"/>
<script src="JavaScript.js"></script>
</head>
<body onload="startPos()">
<div id="dialog"></div>
<div>
<span id="die1"></span>
<span id="die2"></span>
<button id="Roll" onclick ="dice()">Roll dice!</button>
<button id="MovePlayer" onclick="move()">Move Player</button>
<span id="DisplayMoney"></span>$
</div><br/></br></br>
<button id="btop1" disabled = "true"> City1</button>
<button id="btop2" disabled = "true"> City1</button>
<button id="btop3" disabled = "true"> City1</button>
<button id="btop4" disabled = "true"> Train</button>
<button id="btop5" disabled = "true"> City2</button>
<button id="btop6" disabled = "true"> City2</button>
<button id="btop7" disabled = "true"> City2</button>
<button id="btop8" disabled = "true"> Jail</button>
<button id="btop9" disabled = "true"> City1</button>
<button id="btop10" disabled = "true"> City1</button>
<button id="btop11" disabled = "true"> City1</button>
<button id="btop12" disabled = "true"> Train</button>
<button id="btop13" disabled = "true"> City2</button>
<button id="btop14" disabled = "true"> City2</button>
<button id="btop15" disabled = "true"> City2</button>
</body>
</html>
这是我的 javascript 中负责移动播放器的函数:
pos1=1;
function move(){
/* old= old position, pos/cur=the position where
the player goes after rolling the dice */
old = document.getElementById("btop"+pos1);
old.disabled = true;
old.innerHTML=bname;
pos1=pos1+dicesum;
pos="btop"+pos1;
var cur = document.getElementById(pos);
bname=cur.innerHTML;
cur.innerHTML=content;
cur.disabled = false;
cur.style.backgroundColor="red";
var ans = confirm("Would you like to do something here?");
if(ans==true){
makeAction();
}
}
骰子函数:
function dice (){
console.log("dice function invoked");
var dice1 = Math.floor((Math.random() * 6) + 1);
var dice2 = Math.floor((Math.random() * 6) + 1);
dicesum = dice1 + dice2;
//Placing the dice pictures
var d1 = document.getElementById("die1");
var d2 = document.getElementById("die2");
switch(dice1)
{
case 1:
d1.innerHTML = '<img src=\'Photos/Dice/one.jpg\'>';
break;
case 2:
d1.innerHTML = '<img src=\'Photos/Dice/two.jpg\'>';
break;
case 3:
d1.innerHTML = '<img src=\'Photos/Dice/three.jpg\'>';
break;
case 4:
d1.innerHTML = '<img src=\'Photos/Dice/four.jpg\'>';
break;
case 5:
d1.innerHTML = '<img src=\'Photos/Dice/five.jpg\'>';
break;
case 6:
d1.innerHTML = '<img src=\'Photos/Dice/six.jpg\'>';
break;
}
switch(dice2)
{
case 1:
d2.innerHTML = '<img src=\'Photos/Dice/one.jpg\'>';
break;
case 2:
d2.innerHTML = '<img src=\'Photos/Dice/two.jpg\'>';
break;
case 3:
d2.innerHTML = '<img src=\'Photos/Dice/three.jpg\'>';
break;
case 4:
d2.innerHTML = '<img src=\'Photos/Dice/four.jpg\'>';
break;
case 5:
d2.innerHTML = '<img src=\'Photos/Dice/five.jpg\'>';
break;
case 6:
d2.innerHTML = '<img src=\'Photos/Dice/six.jpg\'>';
break;
}
}
和按钮的CSS:
button {
width: 120px;
height: 80px;
border-radius: 15px;
background: linear-gradient( #66b2ff, #e5f2ff);
}
#Roll{
width: 50px !important;
background: linear-gradient( #ff6666, #ffcccc) !important;
}
#MovePlayer{
width: 50px !important;
background: linear-gradient( #ff6666, #ffcccc) !important;
}
我确信这是一个我看不到的简单的东西，只是因为我是一个菜鸟 在 JavaScript 中。为此，我求助于你们(和女孩们!)。 我希望我把每件事都说清楚了，否则我会回答。 感谢您的帮助。
最佳答案
我已经为您制作了 jsfiddle ...您只想更改按钮颜色..对吗？看我的DEMO
<button id="btop1" class="yo" disabled = "true"> City1</button>
<button id="btop2" class="yo" disabled = "true"> City2</button>
<button id="btop3" class="yo" disabled = "true"> City3</button>
<button id="btop4" class="yo" disabled = "true"> City4</button>
<button id="btop5" class="yo" disabled = "true"> City5</button>
<button id="btop6" class="yo" disabled = "true"> City6</button>
<br/>
<button id="green" > throw dice</button>
$("#green").click(function(e){
window.yoyo=Math.floor(Math.random() * 6) + 1;
alert("You got "+window.yoyo);
$(".yo").css("background-color","white");
$("#btop"+window.yoyo).css("background-color","green");
});
关于javascript - 使用 JavaScript 更改按钮的背景颜色将不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34532112/