檢查所有按鈕是否顏色相同，然后顯示文本Javascript

Question

我在這里有此代碼：

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

我想做的是當所有盒子都變成黑色時，使用html顯示一些文本，例如“所有盒子都是黑色的”。 當不是所有的框都是黑色時，我根本不想顯示任何文本。

如果您需要更多信息，請讓我知道，謝謝！

Answer 1

您可以使用下面的代碼查找元素的顏色。

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

上面的代碼將為您提供ID為“ test”的顏色。 您可以將id更改為所需的ID，只需在網格中創建for循環即可。

 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>