Estou tentando colocar eventos de click em uma lista que recebo de uma API. Esta é a resposta que retorno para o status 200. Nele eu monto os botões:
if (xhr.status == 200) {
let exercicio = xhr.responseText;
exercicio = JSON.parse(exercicio);
let x = document.querySelector('#exercicio')
exercicio.map(item => {
x.innerHTML += '<a class="btn-resposta" id="btn-resposta"><div
class="linha"><span class="icones icone-lista"></span><span>' +
item.descricao + '</span></div></a>';
});
}
Até aqui tudo bem, o problema é que depois eu tento fazer um evento de click na class btn-resposta e só o primeiro item da lista recebe o evento de click, os demais não. Este é o código onde faço o click:
function abreRespostas (){
const btnAbreRespostas = document.querySelector('.btn-resposta');
btnAbreRespostas.addEventListener('click', function(evento){
evento.preventDefault();
let mostra = document.querySelector('.mostra-respostas');
mostra.classList.remove('invisivel');
});
}
setTimeout(abreRespostas, 4000);
Tive que fazer uma function para o evento, mas foi necessário.
Resumindo, recebo uma lista da API, insiro com o innerHTML um código html na minha tela, esse código me dá uma lista com vários botões de tag . Faço um código js pra selecionar e adicionar um evento de click em cada um destes botões, porém, da forma que fiz, só está selecionando o primeiro botão que a lista exibe.