Question

我试图这样做，以便每次点击“是”按钮时，下一个方块变为绿色，当我点击“否”时，它会返回一个方格并变为红色。我有点想让每个盒子变成一个变量，但我实际上没有实现它

这是我的代码

＆＃13;

<!DOCTYPE html>
<head>
<style>
div {
width: 300px;
height: 300px;
margin-left: auto;
margin-right: auto;
}

div div {
width: 100px;
height: 100px;
outline: 1px solid;
float: left;
}

h1 {
  text-align: center;
  vertical-align:bottom;
  padding-top: 10px;
}
div div div {
  background-color: black;
}

p {
  text-align: center;
}
button {
  margin:auto;
  display: block;
}
</style>
</head>
<body>
<h1> Seven Stages of Misery </h1>
  <div>
      <div id = "b1"><h1>1</h1></div>
      <div id = "b2"><h1>2</h1></div>
      <div id = "b3"><h1>3</h1></div>
      <div><div></div></div>
      <div><div></div></div>
      <div id = "b4"><h1>4</h1></div>
      <div id = "b7"><h1>7</h1></div>
      <div id = "b6"><h1>6</h1></div>
      <div id = "b5"><h1>5</h1></div>
  </div>
<p id = "question">Did you do it right?</p>

  <button id="yes" type="button"
onclick="document.getElementById('b1').style.background = 'green'">
Yes</button>

  <button id="no" type="button"
onclick="document.getElementById('b1').style.background = 'red'">
No</button>
<script>
var b1 = 0;
var b2 = 0;
var b3 = 0;
var b4 = 0;
var b5 = 0;
var b6 = 0;
var b7 = 0;
var yes= document.getElementById('yes'), no = document.getElementById('no')
yes.onclick if (b1 = 0 || b1 = 2) {
  b1 = 1;
} else if (b2 = 0 || b2 = 2) {
  b2 = 1;
} else if (b3 = 0 || b4 = 2) {
  b3= 1;
} else if (b4 = 0 || b4 = 2) {
  b4= 1;
} else if (b5 = 0 || b5 = 2) {
  b5= 1;
} else if (b6 = 0 || b6 = 2) {
  b6= 1;
} else if (b7 = 0 || b7 = 2) {
  b7= 1;
};
no.onclick if (b7 = 1) {
  b7 = 2;
} else if (b6 = 1) {
  b6 = 2;
} else if (b5 = 1) {
  b5 = 2;
} else if (b4 = 1) {
  b4 = 2;
} else if (b3 = 1) {
  b3 = 2;
} else if (b2 = 1) {
  b2 = 2;
} else if (b1 = 1) {
  b1 = 2;
};
if (b1 = 0) {
  document.getElementById('b1').style.background = 'white';
} else if (b1 = 1) {
  document.getElementById('b1').style.background = 'green';
} else {
  document.getElementById('b1').style.background = 'red';
}

</script>
</body>

＆＃13;

Answer 1

我知道编码不是很好，与你的编码有很大不同，但它对我很有用。我希望这仍有帮助！：

// Buttons
<button id="yes" type="button"
onclick="showProgress(1)">
Yes</button>

<button id="no" type="button"
onclick="showProgress(2)">
No</button>

// JavaScript function
<script>
function showProgress(answer)
{
    var currentDiv = 0;

    if (answer == 1)
    {
        for (var i = 1; i <= 7; i++)
            if (document.getElementById("b" + i).style.backgroundColor == "" || document.getElementById("b" + i).style.backgroundColor == "red")
            {
                currentDiv = i;
                break;
            }

        document.getElementById("b" + currentDiv).style.backgroundColor = "green";
    }
    else
    {
        for (var i = 7; i >= 1; i--)
            if (document.getElementById("b" + i).style.backgroundColor == "green")
            {
                currentDiv = i;
                break;
            }

        document.getElementById("b" + currentDiv).style.backgroundColor = "red";
    }
}
</script>

如何多次点击一个按钮做不同的事情

1 个答案: