1
resposta

Tornar divs independentes, mas com mesmo código Js

Estou criando umas perguntas de múltipla escolha onde cada card possui uma pergunta, respostas e botão de conferir. Estruturei o conteúdo (textos) no HTML pois existem outras pessoas envolvidas e que não saberiam por as perguntas e respostas em um arquivo js. Minha questão é que quando insiro apenas uma pergunta funciona de boa, mas quando existem mais de uma pergunta (div), toda a interação atua em todas as perguntas. Por exemplo, como estou usando querySelector apenas o botão da primeira funciona, ou quando seleciono um das opções da segunda pergunda o resultado aparece na primeira. Gostaria de fazer com que elas sejam independentes. Já pensei em por id nas divs e tentar algo com um array delas, mas não sei como escrever ou se é esse o caminho.

https://jsfiddle.net/1yLwrcek/1/

1 resposta

Oii, Dev! Tudo bem?

Agradeço por aguardar o nosso retorno.

Que projeto legal e obrigada por compartilhá-lo conosco! Uma possível solução para isso seria utilizar classes em vez de ids nas divs, e depois utilizar o método querySelectorAll para selecionar todas as divs com a mesma classe. Assim, você poderá iterar sobre cada div e adicionar os eventos de clique e conferir apenas na div correspondente.

Dessa forma, cada div terá seus próprios eventos e as interações serão independentes. Espero ter ajudado, qualquer dúvida, fico à disposição.

Bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!