1

Eu preciso criar uma espécie de "bingo", no html eu tenho 9 divs e cada uma possuí um número dentro de um span, eu criei um botão que gera os números aleatórios e quando esse número aleatório for igual algum dos números dentro do span, então trocar o background, até que 3 spans na horizontal ou vertical possuam a mesma cor e exiba uma msg 'Bingo'. Não estou conseguindo comparar o valor gerado com o valor do span de forma correta.

var sorteio = document.querySelector('p#numSorteio')
var sortNum = sorteio.innerHTML
 
 
 
function gerarAleatorio(){
   var numAleatorio = Math.floor(Math.random() * 50)
    sorteio.innerHTML = numAleatorio
}
 
function verificar (){
    let numerosDoSorteio = document.querySelectorAll('span')
    num = numerosDoSorteio
    for(num of numerosDoSorteio){
    console.log(num.innerHTML)
    if(num == sortNum){
        console.log('Mudou a cor')
        }
    }
}
verificar()
<h1 class="text-center">Teste Bingo</h1>
        <div class="num text-center">
            <p id="numSorteio"></p>
        </div>
        <div class="sorteio col-12 text-center">
            <a href="#" class="btn btn-primary text-center btn-randow" onclick="gerarAleatorio()">sorteio</a>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-sm" value="3"><span>3</span></div>
                <div class="col-sm" value="8"><span>8</span></div>
                <div class="col-sm" value="10"><span>10</span></div>
            </div>
            <div class="row">
                <div class="col-sm" value="14"><span>14</span></div>
                <div class="col-sm" value="20"><span>20</span></div>
                <div class="col-sm" value="28"><span>28</span></div>
                </div>
            <div class="row">
                    <div class="col-sm" value="32"><span>32</span></div>
                    <div class="col-sm" value="40"><span>40</span></div>
                    <div class="col-sm" value="49"><span>49</span></div>
            </div>
        </div>

1 Resposta 1

4

var sorteio = document.querySelector('p#numSorteio')

var sortNum = sorteio.innerHTML
var numAleatorio
 document.getElementById("mylink").onclick = gerarAleatorio = () =>{
    numAleatorio = Math.floor(Math.random() * 50)
    sorteio.innerHTML = numAleatorio
    var divs = document.querySelectorAll('span'), i;

    for (i = 0; i < divs.length; ++i) {
      if(divs[i].innerText == numAleatorio){
      	divs[i].style.color = "red";
      }
			
    }
    
}
 
<h1 class="text-center">Teste Bingo</h1>
        <div class="num text-center">
            <p id="numSorteio"></p>
        </div>
        <div class="sorteio col-12 text-center">
            <a href="#" id="mylink" class="btn btn-primary text-center btn-randow" >sorteio</a>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-sm" value="3"><span>3</span></div>
                <div class="col-sm" value="8"><span>8</span></div>
                <div class="col-sm" value="10"><span>10</span></div>
            </div>
            <div class="row">
                <div class="col-sm" value="14"><span>14</span></div>
                <div class="col-sm" value="20"><span>20</span></div>
                <div class="col-sm" value="28"><span>28</span></div>
                </div>
            <div class="row">
                    <div class="col-sm" value="32"><span>32</span></div>
                    <div class="col-sm" value="40"><span>40</span></div>
                    <div class="col-sm" value="49"><span>49</span></div>
            </div>
        </div>

2
  • Usando o exemplo que você fez acima ele passa por todas as divs, eu fiz uma alteração no código e toda vez que o número gerado é igual ao span ele add uma classe, para fazer o bingo, teria que uma fileira ou uma coluna inteira tivesse com essa mesma classe adicionada, poderia me mostrar um exemplo de como fazer isso? Commented 21/06/2019 às 12:59
  • Isso aí da pra resolver até com HTML e CSS usando checkbox
    – jcardoso
    Commented 21/06/2019 às 20:20

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 .