Olá Alan, tudo bem?
Muito obrigado por compartilhar seu código, primeiramente devemos atualizar o seu HTML na parte dos foguetes, para o seguinte código:
<div class="peca">
<label for="" class="peca-titulo">Foguetes</label>
<div class="controle">
<button class="controle-ajuste" data-controle="-" data-peca="foguetes">-</button>
<input type="text" class="controle-contador" value="00" data-contador>
<button class="controle-ajuste" data-controle="+" data-peca="foguetes">+</button>
</div>
</div>
Devemos alterar o valor de data-peca="foquetes" para data-peca="foguetes", trocando a letra q pelo g.
fiz alguns teste e erro era que toda vez que eu clicava no mais(+) ou menos(-) do foguete ele atualizava a tela, para isso fiz algumas modificações:
Adicionei um event listener para o evento "submit" no formulário com a classe "montador". Isso é feito utilizando formulario.addEventListener("submit", (evento) => {...});. Dessa forma, quando o formulário for submetido, o evento será capturado.
No event listener do evento "submit", adicionei evento.preventDefault();. Isso evita o comportamento padrão de atualização da página ao submeter o formulário. Assim, a página não será recarregada desnecessariamente.
Adicionei evento.preventDefault(); também nos event listeners dos botões de controle. Isso evita que o clique nos botões dispare o comportamento padrão, que é recarregar a página.
Com essas modificações, você evitará a atualização da página ao clicar nos botões de controle ou ao submeter o formulário. Dessa forma, você poderá interagir com os botões e ver as estatísticas sendo atualizadas sem a página ser recarregada.
Seu código completo fica assim:
const controle = document.querySelectorAll("[data-controle]");
const estatisticas = document.querySelectorAll("[data-estatistica]");
const pecas = {
"bracos": {
"forca": 29,
"poder": 35,
"energia": -21,
"velocidade": -5
},
"blindagem": {
"forca": 41,
"poder": 20,
"energia": 0,
"velocidade": -20
},
"nucleos": {
"forca": 0,
"poder": 7,
"energia": 48,
"velocidade": -24
},
"pernas": {
"forca": 27,
"poder": 21,
"energia": -32,
"velocidade": 42
},
"foguetes": {
"forca": 0,
"poder": 28,
"energia": 0,
"velocidade": -2
}
};
const formulario = document.querySelector(".montador");
formulario.addEventListener("submit", (evento) => {
evento.preventDefault();
});
controle.forEach((elemento) => {
elemento.addEventListener("click", (evento) => {
evento.preventDefault();
manipulaDados(evento.target.dataset.controle, evento.target.parentNode);
atualizaEStatisticas(evento.target.dataset.peca);
});
});
function manipulaDados(operacao, controle) {
const peca = controle.querySelector("[data-contador]");
if (operacao === "-") {
peca.value = parseInt(peca.value) - 1;
} else {
peca.value = parseInt(peca.value) + 1;
}
}
function atualizaEStatisticas(peca) {
estatisticas.forEach((elemento) => {
elemento.textContent = parseInt(elemento.textContent) + pecas[peca][elemento.dataset.estatistica];
});
}
Espero ter ajudado, qualquer dúvida, me coloco à disposição! Bons estudos!
Sucesso ✨
Um grande abraço e até mais!
Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
