Question

我正在制作一个小游戏，其中我有50个按钮，当我点击任何一个按钮时，它的颜色会发生变化，其中，我有一个蓝色的按钮。如果玩家点击该蓝色按钮，他就是赢家。他只有三次机会。。我使用了一个按钮事件处理程序，它接受颜色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>

Answer 1

希望这会对你有所帮助。

<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>

Answer 2

// first add a global variable
var noOfTries = 3;

function selectColor() {
  // check if greater than 3
  if(noOfTries > 0) {

    // if yes, then decrement
    noOfTries = noOfTries - 1;

    // continue with the color change
    if (colorId<=24) {
      document.getElementById(colorId).style.backgroundColor="#BC8F8F";
    }
    else if (colorId==25) {
      document.getElementById(colorId).style.backgroundColor="#0099CC";
    }
    else {
      document.getElementById(colorId).style.backgroundColor="limegreen";
    }
  }
}

Answer 3

使用：

button.addEventListner("click",function() {
  button.style.backgroundColor=nextColor;
})

如何点击按钮在javascript中更改其颜色

3 个答案: