JavaScript 依次改变颜色

Question

我用 html 创建了一个 8x8 的表格。这些表有颜色。我想在 player1 转身时将此背景的颜色从红色更改为蓝色，我想在 player2 转身时将背景颜色从蓝色更改为红色。

     function rollDice(){

   HTML = changeText(1);

  var status = document.getElementById("status");
  var d1 = Math.floor(Math.random() * 6) + 1;
  status.innerHTML = "You rolled "+d1+". Now take your lands!";
     }

.

      <!-- It's writing whose turn -->

     function changeText(idElement) {
        var element = document.getElementById('element' + idElement);
       if (idElement === 1 || idElement === 2) {
          if (element.innerHTML === 'Sıra 2. oyuncuda') element.innerHTML = 'Sıra 1. oyuncuda';
               else {
                    element.innerHTML = 'Sıra 2. oyuncuda';

               }
             }
          }

.

      <!-- Change table's color -->
      function change(idElement){
        var element = document.getElementById(idElement);

        if(element.style.background === 'blue')
            element.style.background = 'red';


           else{
             element.style.background = 'blue';
         } 
       }

这些是我在 html 中的按钮和文本字段

          <table>
          <tr>
        <td id="1" onclick="change(1)" style="background:Blue">
        1
        </td>
        <td id="9"onclick="change(9)" style="background:Blue">
         9
         </td>
        <td id="17"onclick="change(17)"style="background:Blue">
        17
        </td>
        <td id="25"onclick="change(25)"style="background:Blue">
        25
        </td>
        <td id="33" onclick="change(33)"  style="background:Red">
        33
        </td>
        <td id="41"onclick="change(41)"style="background:Red">
        41
        </td>
        <td id="49"onclick="change(49)"style="background:Red">
        49
        </td>
        <td onclick="change(57)"id="57"style="background:Red">
        57
        </td>
        </tr>
           </table>

.

 <div align="center"><h2 id="element1" onClick="javascript:changeText(1)">Sıra 1. oyuncuda</h2>
 <h2 id="element2" onClick="javascript:changeText(2)"></h2></div>
 <div style= "margin-top:10px" align="center">
 <div style= "margin-top:10px" id="die1" class="dice"></div>
 <button onclick="rollDice()">Roll Dice</button>
 <h2 id="status" style="clear:left;"></h2>
 </div>

我想要的只是轮流改变表格的颜色。我该怎么做？

Answer 1

你的问题是你试图改变 element.style.background 这不仅仅是背景颜色。您需要更改：element.style.backgroundColor。

对于依赖于播放器的颜色更改，我使用了 div "element1" 的 innerHTML。 一号玩家不可能从红色变为蓝色，反之亦然。

查看 if 条件 ;)

function rollDice() {

  HTML = changeText(1);
  var status = document.getElementById("status");
  var d1 = Math.floor(Math.random() * 6) + 1;
  status.innerHTML = "You rolled " + d1 + ". Now take your lands!";
}

function changeText(idElement) {
  var element = document.getElementById('element' + idElement);
  if (idElement === 1 || idElement === 2) {
    if (element.innerHTML === 'Sıra 2. oyuncuda') element.innerHTML = 'Sıra 1. oyuncuda';
    else {
      element.innerHTML = 'Sıra 2. oyuncuda';

    }
  }
}

function change(idElement) {
  var element = document.getElementById(idElement);
  var bg = element.style.backgroundColor;
  var text = document.getElementById('element1').innerHTML;
  if (bg == 'Red' && text == 'Sıra 1. oyuncuda') element.style.backgroundColor = 'Blue';
  else if (bg == 'Blue' && text == 'Sıra 2. oyuncuda') {
    element.style.backgroundColor = 'Red';
  } else {
    alert("You are not allowed to do this")
  }
}

<table>
  <tr>
    <td id="1" onclick="change(1)" style="background:Blue">1</td>
    <td id="9" onclick="change(9)" style="background:Blue">9</td>
    <td id="17" onclick="change(17)" style="background:Blue">17</td>
    <td id="25" onclick="change(25)" style="background:Blue">25</td>
    <td id="33" onclick="change(33)" style="background:Red">33</td>
    <td id="41" onclick="change(41)" style="background:Red">41</td>
    <td id="49" onclick="change(49)" style="background:Red">49</td>
    <td onclick="change(57)" id="57" style="background:Red">57</td>
  </tr>
</table>
<div align="center">
  <h2 id="element1" onClick="javascript:changeText(1)">Sıra 1. oyuncuda</h2>

  <h2 id="element2" onClick="javascript:changeText(2)"></h2>
</div>
<div style="margin-top:10px" align="center">
  <div style="margin-top:10px" id="die1" class="dice"></div>
  <button onclick="rollDice()">Roll Dice</button>
  <h2 id="status" style="clear:left;"></h2>

</div>

您也忘记将“tr”放在“table”标签中；）

另一种方法是，正如我在评论中提到的，创建一个名为 player 的全局变量，并将轮到它的信息保存在其中。

我也用这个版本制作了Fiddle