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.


<html>
<head>
    <title></title>


<script type="text/javascript">

    window.addEventListener('load', 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>

<style>
  .boton{
    width:50px;
  }
</style>

</head>
<body>


<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">
<br>
<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">
 <br>
<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">
</body>
</html>


Retornar al menu