0

Estou fazendo um bingo simples utilizando html, css, ajax e JS.

Os elementos da tabela, são trazidos a partir de uma requisição, dentro de um array e posicionados na table(...).

Utilizando a função onclick, pego um número aleatório por outra requisição, a meta é, quando o número sorteado for igual a um dos números presentes na tabela, a posição do número receba um 'X', ou qualquer outra coisa que o marque.

HTML

<button type="button" id="preencher" onclick="preencherATabela()">Preencher Tabela</button>
<table border='1' id="table1">

<thead>
    <tr>
        <th colspan="5">Cartela</th>

    </tr>
</thead>   

<tbody>
</tbody>
</table>

<button type="button" id="jogar" onclick="sortearNumero()">Sortear Nº</button>

<table border="1px" id="table2">

    <thead>
        <tr>
            <th>Números Sorteados</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

<link rel="stylesheet" href="style.css">
<script src="script.js"></script>

JS

let buttonPreencherTabela = document.getElementById("preencher")
let buttonSortearNumero = document.getElementById("jogar")
let tabela = document.getElementById("table1")
let tbody1 = tabela.getElementsByTagName("tbody")[0]
let tabelaNumerosSorteados = document.getElementById("table2")
let tbody2 = tabelaNumerosSorteados.getElementsByTagName("tbody")[0]

tbody1.innerHTML = `<tr><td></td><td></td><td></td><td></td><td></td></tr>
                <tr><td></td><td></td><td></td><td></td><td></td></tr>
                <tr><td></td><td></td><td></td><td></td><td></td></tr>
                <tr><td></td><td></td><td></td><td></td><td></td></tr>
                <tr><td></td><td></td><td></td><td></td><td></td></tr>`

function preencherATabela(){
buttonSortearNumero.style.visibility = "visible"
buttonPreencherTabela.style.visibility = "hidden"
let Numeros = new Array;

var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {

                Numeros = JSON.parse(this.responseText);
                console.log(Numeros);
                tbody1.innerHTML = ' '

                for(let i = 0; i < 20; i++){

                   tbody1.innerHTML += `<tr> <td> ${Numeros[i]} </td> <td> ${Numeros[i+1]} </td> <td> ${Numeros[i+2]} </td> <td> ${Numeros[i+3]} </td> <td> ${Numeros[i+4]} </td>  </tr>`;
                    i+=3
                }   

            }
        };
        xhttp.open("GET", "dados.php", true);
         xhttp.send();



      }

      function sortearNumero(){

      let Numerosorteado;

      var xhttp = new XMLHttpRequest();
       xhttp.onreadystatechange = function() {
       if (this.readyState == 4 && this.status == 200) {

       Numerosorteado = this.responseText;
       console.log(Numerosorteado);

       tbody2.innerHTML += `<tr><td>${Numerosorteado}</td></tr>`;



            }
             }
         xhttp.open("GET", "dados2.php", true);
         xhttp.send();


          }

https://i.sstatic.net/UuXFe.png

1 Resposta 1

1

Você pode varrer as células da tabela procurando o texto que combina com o número sorteado.

Crie uma classe no CSS que altera a cor de fundo da célula para vermelho, por exemplo:

.marcado{
   background-color: red;
}

No JavaScript você adiciona a classe .marcado na célula que combina:

const celulas = tabela.querySelectorAll("tbody td");
for(let c of celulas){
   if(c.textContent.trim() == Numerosorteado){
      c.classList.add("marcado");
   }
}

Coloque o código acima após a linha Numerosorteado = this.responseText;.

Para saber quando todas as células foram marcadas, basta você contar quantas delas possui a classe .marcado:

const marcados = tabela.querySelectorAll("tbody td.marcado").length;
if(marcados == 25){
   alert("acabou");
}

O código acima você coloca após a linha tbody2.innerHTML += ...;

Veja que você irá comparar a variável marcados ao número de células, que são 25 no total. Se esse número 25 for variar, aí é preciso contar o número de células na tabela:

const total_celulas = tabela.querySelectorAll("tbody td").length;
const marcados = tabela.querySelectorAll("tbody td.marcado").length;
if(marcados == total_celulas){
   alert("acabou");
}
2
  • Perfeito!!! E como faço para saber quando todas as posições estiverem marcadas(com o intuito de encerrar o jogo)?
    – gmtlme
    Commented 28/11/2019 às 16:21
  • Alterei a resposta.
    – Sam
    Commented 28/11/2019 às 16:32

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .