JavaScript Изменить цвет в свою очередь

Question

Я создал таблицу 8x8 с html. Эти таблицы имеют цвета. Я хочу изменить цвет фона в красный цвет на синий, когда игрок1 поворачивается, и я хочу изменить цвет фона с синего на красный, когда игрок2 поворачивается.

 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.

Для меняющего цвета цвета я использовал innerHTML div «element1». Невозможно, чтобы игрок мог переключиться с красного на синий и наоборот.

Посмотрите на состояние, если-;)

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" в "таблице" в тег;)

Другой способ как упоминалось в моем комментарии, сделать глобальный переменный именованный проигрыватель и получить информацию о том, кто его поддерживает, он сохраняется в нем.

Я сделал Fiddle с этой версии слишком