Fatal编程技术网
  • javascript/
  • 如何在Javascript中单击按钮更改其颜色

如何在Javascript中单击按钮更改其颜色

javascript html

如何在Javascript中单击按钮更改其颜色,javascript,html,dom-events,Javascript,Html,Dom Events,我正在做一个小游戏，在里面我有50个按钮，当我点击任何一个按钮时，它的颜色会改变，其中有一个按钮是蓝色的。如果玩家点击蓝色按钮，他就是赢家。他只有三次机会。我使用了一个按钮eventhandler，它获取颜色id并相应地更改颜色。但是计数的colorId是51，而不是1-50个按钮。怎么了 <html> <head> <title>Blue-Box</title> </head> <body> <sc

我正在做一个小游戏，在里面我有50个按钮，当我点击任何一个按钮时，它的颜色会改变，其中有一个按钮是蓝色的。如果玩家点击蓝色按钮，他就是赢家。他只有三次机会。我使用了一个按钮
eventhandler
，它获取颜色id并相应地更改颜色。但是计数的colorId是51，而不是1-50个按钮。怎么了

<html>

 <head>
   <title>Blue-Box</title>
</head>

 <body>
  <script>
    var colorId;
    var button;
    var noOfTries = 3;
    function createButtons() {
        colorId = 0;

        for (var index = 0; index <= 50; index++) {
            button = document.createElement("button");
            button.innerHTML = "box " + index;
            button.id = colorId;
            button.setAttribute("value", colorId);
            button.setAttribute("text", colorId);
            button.style.fontFamily = "Times New Roman";
            button.style.backgroundColor = "#C0C0C0";
            button.style.fontSize = "15px";
            document.body.appendChild(button);
            colorId++;

            button.addEventListener("click", selectColor);

        }

    }

    function selectColor() {
        console.log((colorId));
        console.log("button click");
        if (noOfTries > 0) {
            noOfTries = noOfTries - 1;
            if ((colorId) <= 24) {
                console.log("red color")
                document.getElementById(colorId).style.backgroundColor = "#BC8F8F";
            }
            else if (colorId == 25) {
                console.log("blue color")
                document.getElementById(colorId).style.backgroundColor = "#0099CC";
                document.write("You Won the game");
                noOfTries = 3;
            }
            else if (colorId > 25 && colorId < 51) {

                document.getElementById(colorId).style.backgroundColor = "#008080";

            }
        }
        else {
            document.write("Your attempts have finished");
        }

    }



  </script>

<div id="divbox">
    <button id="buttonbox" onclick="createButtons()">Click to start the Game</button>
</div>
 </body>

 </html>


蓝盒子
彩色变种；
var按钮；
var noOfTries=3；
函数createButtons（）{
colorId=0；
对于（var指数=0；指数0）{
noOfTries=noOfTries-1；
if（（colorId）25&&colorId<51）{
document.getElementById（colorId）.style.backgroundColor=“#008080”；
}
}
否则{
写下（“你的尝试已经完成”）；
}
}
点击开始游戏

//首先添加一个全局变量
var noOfTries=3；
函数selectColor（）{
//检查是否大于3
如果（中午>0）{
//如果是，则递减
noOfTries=noOfTries-1；
//继续改变颜色
if（colorId
//首先添加一个全局变量
var noOfTries=3；
函数selectColor（）{
//检查是否大于3
如果（中午>0）{
//如果是，则递减
noOfTries=noOfTries-1；
//继续改变颜色
如果（colorId使用：

使用：

希望这对你有帮助


<html>
<head>
   <title>Blue-Box</title>
</head>
<body>
<script>
    var colorId = 1;
    var button;
    var lives = 0;
    function createButtons(){

        colorId=0;

        for(var index=1;index<=50;index++){
            button=document.createElement("button");
            button.innerHTML="box "+index;
            button.id=colorId;
            button.setAttribute("value",colorId);
            button.setAttribute("text",colorId);
            button.style.fontFamily="Times New Roman";
            button.style.backgroundColor="#C0C0C0";
            button.style.fontSize="15px";
            button.addEventListener("click", function(){
                selectColor(this.id);
            })
            document.getElementById("btnbox").appendChild(button);
            colorId++;
        }
    }

    function selectColor(colorId){
        lives++;
        if(lives < 4){
            if (colorId<=24){
                document.getElementById(colorId).style.backgroundColor="#BC8F8F";
            }
            else if (colorId==25){
                document.getElementById(colorId).style.backgroundColor="#0099CC";
                alert("Winner");
                location.reload();
            }
            else{
                document.getElementById(colorId).style.backgroundColor="limegreen";
            }
        }
        else if(lives == 4){
            alert("Game over!");
            location.reload();
        }

    }

</script>
<div id="divbox">
    <button  id="buttonbox" onclick="createButtons()">Click to start the Game</button>
</div>
<div id="btnbox">

</div>
</body>




蓝盒子
var-colorId=1；
var按钮；
var=0；
函数createButtons（）{
colorId=0；
对于（var index=1；index希望这对您有所帮助


<html>
<head>
   <title>Blue-Box</title>
</head>
<body>
<script>
    var colorId = 1;
    var button;
    var lives = 0;
    function createButtons(){

        colorId=0;

        for(var index=1;index<=50;index++){
            button=document.createElement("button");
            button.innerHTML="box "+index;
            button.id=colorId;
            button.setAttribute("value",colorId);
            button.setAttribute("text",colorId);
            button.style.fontFamily="Times New Roman";
            button.style.backgroundColor="#C0C0C0";
            button.style.fontSize="15px";
            button.addEventListener("click", function(){
                selectColor(this.id);
            })
            document.getElementById("btnbox").appendChild(button);
            colorId++;
        }
    }

    function selectColor(colorId){
        lives++;
        if(lives < 4){
            if (colorId<=24){
                document.getElementById(colorId).style.backgroundColor="#BC8F8F";
            }
            else if (colorId==25){
                document.getElementById(colorId).style.backgroundColor="#0099CC";
                alert("Winner");
                location.reload();
            }
            else{
                document.getElementById(colorId).style.backgroundColor="limegreen";
            }
        }
        else if(lives == 4){
            alert("Game over!");
            location.reload();
        }

    }

</script>
<div id="divbox">
    <button  id="buttonbox" onclick="createButtons()">Click to start the Game</button>
</div>
<div id="btnbox">

</div>
</body>




蓝盒子
var-colorId=1；
var按钮；
var=0；
函数createButtons（）{
colorId=0；

for（var index=1；indexforchanging color使用
backgroundColor
而不是
color
document.getElementById（colorId）.style.backgroundColor=“#BC8F8F”
onclick处理程序也应该进入循环，否则您只为一个ID设置onclick处理程序，而不是为所有50个ID设置onclick处理程序要更改颜色，请使用
backgroundColor
而不是
color
document.getElementById（colorId）.style.backgroundColor=“#BC8F8F”
onclick处理程序也应该进入循环，否则您只为一个ID而不是所有50个ID设置onclick处理程序。（此时不存在一个ID。）在哪里添加它？为什么添加它？我可以只使用这个-按钮吗？addEventListener（“单击”，selectColor（））；inside createButtons（）函数在哪里添加它？为什么添加它？我可以只使用这个-按钮吗？addEventListener（“单击”，selectColor（））；inside createButtons（）函数

<html>
<head>
   <title>Blue-Box</title>
</head>
<body>
<script>
    var colorId = 1;
    var button;
    var lives = 0;
    function createButtons(){

        colorId=0;

        for(var index=1;index<=50;index++){
            button=document.createElement("button");
            button.innerHTML="box "+index;
            button.id=colorId;
            button.setAttribute("value",colorId);
            button.setAttribute("text",colorId);
            button.style.fontFamily="Times New Roman";
            button.style.backgroundColor="#C0C0C0";
            button.style.fontSize="15px";
            button.addEventListener("click", function(){
                selectColor(this.id);
            })
            document.getElementById("btnbox").appendChild(button);
            colorId++;
        }
    }

    function selectColor(colorId){
        lives++;
        if(lives < 4){
            if (colorId<=24){
                document.getElementById(colorId).style.backgroundColor="#BC8F8F";
            }
            else if (colorId==25){
                document.getElementById(colorId).style.backgroundColor="#0099CC";
                alert("Winner");
                location.reload();
            }
            else{
                document.getElementById(colorId).style.backgroundColor="limegreen";
            }
        }
        else if(lives == 4){
            alert("Game over!");
            location.reload();
        }

    }

</script>
<div id="divbox">
    <button  id="buttonbox" onclick="createButtons()">Click to start the Game</button>
</div>
<div id="btnbox">

</div>
</body>