Check background colour of the grid of buttons in my code

Question

What I'm trying to do, is get it so when all of the buttons have been turned to black, it displays the h2 text in the 'lightsoff' div. So if any of the buttons aren't black, the text will be hidden.

I'd like to be able to do it by writing a new function that carries out the checking of the background colour.

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

Use classes and count

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

Toggle a class using classList for the state and then look at the number of elements with that class by using 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>

If you really want to do it without using classes than you need to loop over all the cells and see if any of them are the color. Checking color codes can be a pain because not all browsers return the same thing. I would just check the text.

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