Неправильное срабатывание функции

29 сентября 2019, 23:50

<!DOCTYPE html> 
<html> 
 
<head> 
 
  <meta charset="utf-8"> 
  <title>Tic Tac Toe</title> 
  <style> 
    table { 
      border-collapse: collapse; 
    } 
  </style> 
</head> 
 
<body> 
  <script type="text/javascript"> 
    var asasa = 0; 
  </script> 
  <table border='1px' width='500px' height='500px' align="center"> 
    <tr> 
      <td id='tables1' class="one" style="font-size: 50px; text-align:center;" onclick="this.style.backgroundColor = '#045d99'; player_turn(); asasa=1"></td> 
      <td id='tables2' class="two" style="font-size: 50px; text-align:center;" onclick="this.style.backgroundColor = '#045d99'; player_turn(); asasa=2"></td> 
      <td id='tables3' class="three" style="font-size: 50px; text-align:center;" onclick="this.style.backgroundColor = '#045d99'; player_turn(); asasa=3"></td> 
    </tr> 
 
    <tr style='border-color: red'> 
      <td id='tables4' class="four" style="font-size: 50px; text-align:center;" onclick="this.style.backgroundColor = '#045d99'; player_turn(); asasa=4"></td> 
      <td id='tables5' class="five" style="font-size: 50px; text-align:center;" onclick="this.style.backgroundColor = '#045d99'; player_turn(); asasa=5"></td> 
      <td id='tables6' class="six" style="font-size: 50px; text-align:center;" onclick="this.style.backgroundColor = '#045d99'; player_turn(); asasa=6"></td> 
    </tr> 
 
    <tr style='border-color: red'> 
      <td id='tables7' class="seven" style="font-size: 50px; text-align:center;" onclick="this.style.backgroundColor = '#045d99'; player_turn(); asasa=7"></td> 
      <td id='tables8' class="eight" style="font-size: 50px; text-align:center;" onclick="this.style.backgroundColor = '#045d99'; player_turn(); asasa=8"></td> 
      <td id='tables9' class="nine" style="font-size: 50px; text-align:center;" onclick="this.style.backgroundColor = '#045d99'; player_turn(); asasa=9"></td> 
    </tr> 
 
    <script type="text/javascript"> 
      asasa = 0; 
 
      function player_turn() { 
 
        if (document.getElementById('tables1').className == 'one' & asasa == 1) { 
          document.getElementById('tables1').className = 'none' 
 
          alert("Bot turn") 
        } else if (document.getElementById('tables2').className == 'two' && asasa == 2) { 
          document.getElementById('tables2').className = 'none' 
 
          alert("Bot turn") 
        } else if (document.getElementById('tables3').className == 'three' && asasa == 3) { 
          document.getElementById('tables3').className = 'none' 
 
          alert("Bot turn") 
        } else if (document.getElementById('tables4').className == 'four' && asasa == 4) { 
          document.getElementById('tables4').className = 'none' 
 
          alert("Bot turn") 
        } 
 
        if (document.getElementById('tables5').className == 'five' && asasa == 5) { 
          document.getElementById('tables5').className = 'none' 
 
          alert("Bot turn") 
        } 
 
        if (document.getElementById('tables6').className == 'six' && asasa == 6) { 
          document.getElementById('tables6').className = 'none' 
 
          alert("Bot turn") 
        } 
 
        if (document.getElementById('tables7').className == 'seven' && asasa == 7) { 
          document.getElementById('tables7').className = 'none' 
 
          alert("Bot turn") 
        } 
 
        if (document.getElementById('tables8').className == 'eight' && asasa == 8) { 
          document.getElementById('tables8').className = 'none' 
 
          alert("Bot turn") 
        } 
 
        if (document.getElementById('tables9').className == 'nine' && asasa == 9) { 
          document.getElementById('tables9').className = 'none' 
 
          alert("Bot turn") 
        } 
      } 
    </script> 
</body> 
 
</html>

Функция должна срабатывать при первом нажатии а не при втором.

Answer 1

Поменяйте местами player_turn(); и asasa=... во всех onclick.