检查所有按钮是否颜色相同，然后显示文本Javascript

Question

I have this code here:

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();
};

What I want to do is display some text using html saying for example "All the boxes are black" when all the boxes have been turned black. When not all the boxes are black, I want no text to display at all.

If you need any more information please let me know, thanks!

Answer 1

You can use the code below to find the color of an element.

$("#test").css('color')

The code above would give you the color of something with an id of "test". You can change the id to what you would need, and just create a for loop looping through your grid.

 var color = $('.but_00').css('background-color'); var colorsAreEqual = true; for (var i = 0; i < 5; i++) { for (var j = 0; j < 5; j++) { if ($('.but_' + i + j).css('background-color') != color) { colorsAreEqual = false; } } } if (colorsAreEqual) { //The boxes are all the same color console.log("The colors are all " + color); } else { //The boxes are not all the same color, so it displays nothing. console.log("The colors are not the same"); } 

 #button { background-color: black; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="but_00" id="button">1</button> <button class="but_01" id="button">1</button> <button class="but_02" id="button">1</button> <button class="but_03" id="button">1</button> <button class="but_04" id="button">1</button> <button class="but_10" id="button">1</button> <button class="but_11" id="button">1</button> <button class="but_12" id="button">1</button> <button class="but_13" id="button">1</button> <button class="but_14" id="button">1</button> <button class="but_20" id="button">1</button> <button class="but_21" id="button">1</button> <button class="but_22" id="button">1</button> <button class="but_23" id="button">1</button> <button class="but_24" id="button">1</button> <button class="but_30" id="button">1</button> <button class="but_31" id="button">1</button> <button class="but_32" id="button">1</button> <button class="but_33" id="button">1</button> <button class="but_34" id="button">1</button> <button class="but_40" id="button">1</button> <button class="but_41" id="button">1</button> <button class="but_42" id="button">1</button> <button class="but_43" id="button">1</button> <button class="but_44" id="button">1</button>