JavaScript Change Color in turn

Question

I created a 8x8 table with html. These tables has colors. I want to change this backgrounds' color red to blue when player1 turns and I want to change backgrounds' color blue to red when player2 turns.

     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';
         } 
       }

And these are my buttons and text fields in 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>

All I want is change tables' colors by turns. How can I do this?

Answer 1

Your problem is that you are trying to change the element.style.background which is not ONLY the background color. You need to change: element.style.backgroundColor.

For the Player-depending change of the color i used the innerHTML of the div "element1". Its not possible for player one to change from red to blue and the other way round.

Look at the if-condition ;)

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>

Also you have forgotten to put the "tr" in a "table"-tag ;)

Another way is, as mentioned in my Comment, to make a global Variable named player and have the information whos turn it is saved in it.

I made a Fiddle with this Version too