F�rum Verificar se as Tags possuem a mesma classe - JS puro #603967

27/07/2019

Boa tarde,
eu tenho nove divs, tr�s em cada linha, cada div possu� um span dentro dela com um valor. Eu criei um bot�o que gera n�meros aleat�rios e quando o n�mero gerado for igual ao da div ela mudar� sua classe e quando 3 divs da mesma linha ou coluna possuir a mesma classe exibir uma mensagem 'Bingo'.
Minha d�vida � como fazer essa verifica��o os span possuem a mesma classe para ent�o, exibir a mensagem bingo.

<body>
    <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="bt-gerar" class="btn btn-primary text-center btn-randow" >sorteio</a>
    </div>
    <div class="container">
        <div class="row row1">
            <div class="col-sm" value="3"><span  class="span-bingo n3">3</span></div>
            <div class="col-sm" value="8"><span class="span-bingo n8">8</span></div>
            <div class="col-sm" value="10"><span class="span-bingo n10">10</span></div>
        </div>
        <div class="row row2">
            <div class="col-sm" value="14"><span class="span-bingo n14">14</span></div>
            <div class="col-sm" value="20"><span class="span-bingo n20">20</span></div>
            <div class="col-sm" value="28"><span class="span-bingo n28">28</span></div>
            </div>
        <div class="row row3">
                <div class="col-sm" value="32"><span class="span-bingo n32">32</span></div>
                <div class="col-sm" value="40"><span class="span-bingo n40">40</span></div>
                <div class="col-sm" value="49"><span class="span-bingo n49">49</span></div>
        </div>
    </div>
</body>
<script src="bingo.js"></script>

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

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

    for (i = 0; i < divs.length; ++i) {
      if(divs[i].innerText == numAleatorio){
        divs[i].classList.remove("span-bingo")
        divs[i].classList.add("numeroSorteado")
        
        }

      }

Danilo Alves

Curtir t�pico

+ 0

Responder