Bingo - Javascript

Asked

Viewed 193 times

1

I need to create a kind of "bingo", in html I have 9 Divs and each has a number within a span, I created a button that generates the random numbers and when that random number equals any of the numbers within the span, then change the background, until 3 horizontal or vertical spans have the same color and display a 'Bingo' msg. I’m not able to compare the generated value with the span value correctly.

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>

javascript

1 answer

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>

  • Using the example you did above it goes through all the Divs, I made a change in the code and every time the number generated is equal to span it add a class, to make the bingo, would have a row or an entire column had that same class added, could show me an example of how to do this?

  • This can even be solved with HTML and CSS using checkbox

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.