Question

我是新手对于javascript和我认为非常简单的问题，但无论我想做什么我都无法解决这个问题。我正在制作一个垄断游戏，我想在掷骰子之后改变玩家所在位置的背景颜色。所有位置都是按钮，所有按钮都有ID，所有按钮都有蓝色背景。我试图给它一个'！important'，但没有运气。我试图用.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中。为此，我转向你们（和女孩们！）。我希望我把所有事情都清楚，如果不是我会回答。谢谢你的帮助。

Answer 1

我为你制作了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");
});

Jsfiddle

使用JavaScript为按钮更改背景颜色将无效

1 个答案: