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>