Parámetro del método asociado al addEventListener.

PROBLEMA

  1. Implementar un tablero de TaTeTi. Asociar el evento click de los 9 botones a una única función. Alternar entre las "X" y "O". Mostrar un mensaje cuando gana un jugador.
Solución
Problema 1.


<!DOCTYPE html>
<html>

<head>
  <title>Ejemplo de JavaScript</title>
  <meta charset="UTF-8">
  <style>
    .boton {
      width: 50px;
      height: 50px;
      margin: 10px;
    }
  </style>
</head>

<body>

  <div>
    <input type="button" id="boton1" name="boton1" value=" " class="boton">
    <input type="button" id="boton2" name="boton2" value=" " class="boton">
    <input type="button" id="boton3" name="boton3" value=" " class="boton">
  </div>
  <div>
    <input type="button" id="boton4" name="boton4" value=" " class="boton">
    <input type="button" id="boton5" name="boton5" value=" " class="boton">
    <input type="button" id="boton6" name="boton6" value=" " class="boton">
  </div>
  <div>
    <input type="button" id="boton7" name="boton7" value=" " class="boton">
    <input type="button" id="boton8" name="boton8" value=" " class="boton">
    <input type="button" id="boton9" name="boton9" value=" " class="boton">
  </div>
  <script>
    window.addEventListener('DOMContentLoaded', inicio, false);

    var jugador = 'X';

    function inicio() {
      for (var x = 1; x <= 9; x++) {
        document.getElementById('boton' + x).addEventListener('click', presion, false);
      }
    }

    function presion(evt) {
      evt.target.value = jugador;
      if (jugador == 'X')
        jugador = 'O';
      else
        jugador = 'X';
      verificarGanador();
    }

    function verificarGanador() {
      var b1 = document.getElementById('boton1').value;
      var b2 = document.getElementById('boton2').value;
      var b3 = document.getElementById('boton3').value;
      var b4 = document.getElementById('boton4').value;
      var b5 = document.getElementById('boton5').value;
      var b6 = document.getElementById('boton6').value;
      var b7 = document.getElementById('boton7').value;
      var b8 = document.getElementById('boton8').value;
      var b9 = document.getElementById('boton9').value;

      if (b1 == 'X' && b2 == 'X' && b3 == 'X')
        alert('Gano la X');
      if (b4 == 'X' && b5 == 'X' && b6 == 'X')
        alert('Gano la X');
      if (b7 == 'X' && b8 == 'X' && b9 == 'X')
        alert('Gano la X');
      if (b1 == 'X' && b4 == 'X' && b7 == 'X')
        alert('Gano la X');
      if (b2 == 'X' && b5 == 'X' && b8 == 'X')
        alert('Gano la X');
      if (b3 == 'X' && b6 == 'X' && b9 == 'X')
        alert('Gano la X');
      if (b1 == 'X' && b5 == 'X' && b9 == 'X')
        alert('Gano la X');
      if (b3 == 'X' && b5 == 'X' && b7 == 'X')
        alert('Gano la X');

      if (b1 == 'O' && b2 == 'O' && b3 == 'O')
        alert('Gano la O');
      if (b4 == 'O' && b5 == 'O' && b6 == 'O')
        alert('Gano la O');
      if (b7 == 'O' && b8 == 'O' && b9 == 'O')
        alert('Gano la O');
      if (b1 == 'O' && b4 == 'O' && b7 == 'O')
        alert('Gano la O');
      if (b2 == 'O' && b5 == 'O' && b8 == 'O')
        alert('Gano la O');
      if (b3 == 'O' && b6 == 'O' && b9 == 'O')
        alert('Gano la O');
      if (b1 == 'O' && b5 == 'O' && b9 == 'O')
        alert('Gano la O');
      if (b3 == 'O' && b5 == 'O' && b7 == 'O')
        alert('Gano la O');
    }
  </script>

</body>

</html>


Retornar al menu