-4

Fala pessoal, to com uma dúvida básica aqui do seguinte. Estou criando uma calculadora em HTML, CSS e JS pra treinar o que aprendi até agora, só que para deixar o código mais limpo, quero usar o eventListener, segue mais detalhes:

O codigo abaixo, eh a parte HTML da calculadora

<div class="container">
        <div class="calc">
            <div class="res">0</div>
            <div class="buttons">                
                <button class="btn span2 op">C</button>
                <button class="btn op">&larr;</button>
                <button class="btn op">÷</button>
                <button class="btn num">7</button>
                <button class="btn num">8</button>
                <button class="btn num">9</button>
                <button class="btn op">x</button>
                <button class="btn num">4</button>
                <button class="btn num">5</button>
                <button class="btn num">6</button>
                <button class="btn op">-</button>
                <button class="btn num">1</button>
                <button class="btn num">2</button>
                <button class="btn num">3</button>
                <button class="btn op">+</button>
                <button class="btn span2 num">0</button>
                <button class="btn">,</button>
                <button class="btn eq">=</button>
            </div>
        </div>
    </div>

E eu queria selecionar apenas os botoes de numero que contem "num" na classe, pra executar uma determinada funcao, com o querySelector ele seleciona apenas o 1o botao, que seria o "7", e não to sacando direito como usar o querySelectorAll pra fazer isso, e eu possa colocar no eventListener. podem me dar uma luz ?

1 Resposta 1

-4

você pode usar um laço de repetção for para pegar todos os buttons que tem a classe 'num', e depois usar o addEventListener para dar alguma reação dinâmica aos buttons selecionados.

EX:

for(let n = 0; 0 <= 9; n++){
  const btnNum = document.querySelectorAll('.num')[n]

  btnNum.addEventListener('click',() => {
  alert('buttons com class num funcionando')
  }) 
}
<div class="container">
        <div class="calc">
            <div class="res">0</div>
            <div class="buttons">                
                <button class="btn span2 op">C</button>
                <button class="btn op">&larr;</button>
                <button class="btn op">÷</button>
                <button class="btn num">7</button>
                <button class="btn num">8</button>
                <button class="btn num">9</button>
                <button class="btn op">x</button>
                <button class="btn num">4</button>
                <button class="btn num">5</button>
                <button class="btn num">6</button>
                <button class="btn op">-</button>
                <button class="btn num">1</button>
                <button class="btn num">2</button>
                <button class="btn num">3</button>
                <button class="btn op">+</button>
                <button class="btn span2 num">0</button>
                <button class="btn">,</button>
                <button class="btn eq">=</button>
            </div>
        </div>
    </div>

1
  • 1
    Em vez de fazer um for com valores fixos, pode ser apenas for (const btnNum of document.querySelectorAll('.num')) { btnNum.addEventListener( etc...) } - além de funcionar independente da quantidade de botões, é também mais eficiente, pois da forma que vc fez, vc busca todos os elementos várias vezes (cada chamada de querySelectorAll traz todos os elementos, e não tem porque fazer isso várias vezes se dá pra fazer apenas uma)
    – hkotsubo
    Commented 10/04/2022 às 2:57

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 .