Question

我想做的是得到它，所以当所有按钮都变成黑色时，它会在“ lightsoff” div中显示h2文本。因此，如果任何按钮不是黑色的，则文本将被隐藏。

我希望能够通过编写一个用于检查背景颜色的新功能来做到这一点。

function toggle(i, j) {
  b = document.getElementById("but_" + i + j)
  t = b.innerHTML
  if (t == "X") {
    b.innerHTML = "O";
    b.setAttribute("style", "color:red; background-color:yellow")
  }
  if (t == "O") {
    b.innerHTML = "X";
    b.setAttribute("style", "color:white; background-color:black")
  }
}

function press(i, j) {
  toggle(i, j);

  if (i > 0) {
    toggle(i - 1, j);
  }
  if (i < 4) {
    toggle(i + 1, j);
  }
  if (j > 0) {
    toggle(i, j - 1);
  }
  if (j < 4) {
    toggle(i, j + 1);
  }
}

function generateGrid() {
  var d = document.getElementById("button-grid");
  var table = document.createElement("table");
  d.appendChild(table);
  for (var i = 0; i < 5; i++) {
    var row = document.createElement("tr");
    for (var j = 0; j < 5; j++) {
      var cell = document.createElement("td");
      cell.innerHTML = "<button type=button id=but_" + i + j +
        " onclick=\"press(" + i + ',' + j + ")\"" +
        " style=\"color:red; background-color:yellow\"" +
        ">O</button>";
      row.appendChild(cell);
    }
    table.appendChild(row);
  }
  toggle(2, 2)
}

window.onload = function() {
  generateGrid();
};

<center>

  <h1>Lights Off Puzzle</h1>

  <h3>Click on the buttons until they all turn black!</h3>

  <div id="button-grid"></div>

  <div id="lightsoff">
    <h2>All the lights are out, you win!</h2>
  </div>

</center>

Answer 1

使用类并计数

function toggle(i, j) {
  b = document.getElementById("but_" + i + j)
  t = b.innerHTML
  if (t == "X") {
    b.innerHTML = "O";
    b.className="on"
  }
  if (t == "O") {
    b.innerHTML = "X";
    b.className="off"
  }
  var off = document.querySelectorAll(".off").length === document.querySelectorAll("#button-grid table tr td").length; // are all off
  document.getElementById("lightsoff").style.display= off ? "block":"none"; // ternary shorthand for if (something) x=a; else x=b;
}

function press(i, j) {
  toggle(i, j);

  if (i > 0) {
    toggle(i - 1, j);
  }
  if (i < 4) {
    toggle(i + 1, j);
  }
  if (j > 0) {
    toggle(i, j - 1);
  }
  if (j < 4) {
    toggle(i, j + 1);
  }
}

function generateGrid() {
  var d = document.getElementById("button-grid");
  var table = document.createElement("table");
  d.appendChild(table);
  for (var i = 0; i < 5; i++) {
    var row = document.createElement("tr");
    for (var j = 0; j < 5; j++) {
      var cell = document.createElement("td");
      cell.innerHTML = "<button type=button id=but_" + i + j +
        " onclick=\"press(" + i + ',' + j + ")\"" +
        " class='red'" +
        ">O</button>";
      row.appendChild(cell);
    }
    table.appendChild(row);
  }
  toggle(2, 2)
}

window.onload = function() {
  generateGrid();
};

.on {color:red; background-color:yellow} 
.off {color:white; background-color:black}
#lightsoff { display: none }

<center>

  <h1>Lights Off Puzzle</h1>

  <h3>Click on the buttons until they all turn black!</h3>

  <div id="button-grid"></div>

  <div id="lightsoff">
    <h2>All the lights are out, you win!</h2>
  </div>

</center>

Answer 2

使用classList切换类的状态，然后使用querySelectorAll()查看该类的元素数量。

function toggle(i, j) {
  b = document.getElementById("but_" + i + j)
  b.classList.toggle("on")
  b.textContent = b.classList.contains("on") ? "O" : "X"
}

function press(i, j) {
  toggle(i, j);

  if (i > 0) {
    toggle(i - 1, j);
  }
  if (i < 4) {
    toggle(i + 1, j);
  }
  if (j > 0) {
    toggle(i, j - 1);
  }
  if (j < 4) {
    toggle(i, j + 1);
  }
  
  console.log("Number of on buttons is: ", document.querySelectorAll("button.on").length)
}

function generateGrid() {
  var d = document.getElementById("button-grid");
  var table = document.createElement("table");
  d.appendChild(table);
  for (var i = 0; i < 5; i++) {
    var row = document.createElement("tr");
    for (var j = 0; j < 5; j++) {
      var cell = document.createElement("td");
      cell.innerHTML = "<button type=button id=but_" + i + j +
        " onclick=\"press(" + i + ',' + j + ")\"" +
        " class='on' " +
        ">O</button>";
      row.appendChild(cell);
    }
    table.appendChild(row);
  }
  toggle(2, 2)
}

window.onload = function() {
  generateGrid();
};

td button{
  color: #FFF;
  background-color: #000;
}

td button.on {
  color: red;
  background-color: #FFC;
}

<center>

  <h1>Lights Off Puzzle</h1>

  <h3>Click on the buttons until they all turn black!</h3>

  <div id="button-grid"></div>

  <div id="lightsoff">
    <h2>All the lights are out, you win!</h2>
  </div>

</center>

如果您真的想在不使用类的情况下进行操作，则需要遍历所有单元格并查看其中是否有颜色。检查颜色代码可能很麻烦，因为并非所有浏览器都返回相同的内容。我会检查文本。

function check()
  var btns = document.querySelectorAll("button")
  for (var i=0; i<btns.length; i++) {
    if (btns[i].textContent === "O") return false
  }
  return true
}

在我的代码中检查按钮网格的背景颜色

2 个答案: