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。 對於玩家來說，它不可能從紅色變爲藍色，反之亦然。

看那如果條件;）

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」 的 「表」 - 標記;）

另一種方式正如我的評論中提到的那樣，創建一個名爲player的全局變量，並將其保存在其中的信息發送給它。

我做了一個Fiddle這個版本太