Boa noite,
Estou com o um erro na hora de atualizar as estatísticas, mas não consigo achar onde. Verifiquei os colegas que também tiveram algum erro semelhante, mas não consigo achar. Poderiam me ajudar, por gentileza?
Estou com o um erro na hora de atualizar as estatísticas, mas não consigo achar onde. Verifiquei os colegas que também tiveram algum erro semelhante, mas não consigo achar. Poderiam me ajudar, por gentileza?
<section class="box estatisticas">
<div class="estatistica">
<p class="estatistica-titulo">Força</p>
<div class="estatistica-valor">
<p class="estatistica-numero" data-estatistica="forca">0</p>
</div>
</div>
<div class="estatistica">
<p class="estatistica-titulo">Poder</p>
<div class="estatistica-valor">
<p class="estatistica-numero" data-estatistica="poder">0</p>
</div>
</div>
<div class="estatistica">
<p class="estatistica-titulo">Energia</p>
<div class="estatistica-valor">
<p class="estatistica-numero" data-estatistica="energia">0</p>
</div>
</div>
<div class="estatistica">
<p class="estatistica-titulo">Velocidade</p>
<div class="estatistica-valor">
<p class="estatistica-numero" data-estatistica="velocidade">0</p>
</div>
</div>
</section>
<section class="equipamentos">
<form action="" class="montador">
<div class="box montador-conteudo">
<div class="peca">
<label for="" class="peca-titulo">Braços</label>
<div class="controle">
<buttom class="controle-ajuste" data-controle="-" data-peca="bracos">-</buttom>
<input type="text" class="controle-contador" value="00" data-contador />
<buttom class="controle-ajuste" data-controle="+">+</buttom>
</div>
</div>
<hr class="linha" />
<div class="peca">
<label for="" class="peca-titulo">Blindagem</label>
<div class="controle">
<buttom class="controle-ajuste" data-controle="-" data-peca="blindagem">-</buttom>
<input type="text" class="controle-contador" value="00" data-contador/>
<buttom class="controle-ajuste" data-controle="+">+</buttom>
</div>
</div>
<hr class="linha" />
<div class="peca">
<label for="" class="peca-titulo">Núcleos</label>
<div class="controle">
<buttom class="controle-ajuste" data-controle="-" data-peca="nucleos">-</buttom>
<input type="text" class="controle-contador" value="00" data-contador/>
<buttom class="controle-ajuste" data-controle="+">+</buttom>
</div>
</div>
<hr class="linha" />
<div class="peca">
<label for="" class="peca-titulo">Pernas</label>
<div class="controle">
<buttom class="controle-ajuste" data-controle="-" data-peca="pernas">-</buttom>
<input type="text" class="controle-contador" value="00" data-contador/>
<buttom class="controle-ajuste" data-controle="+">+</buttom>
</div>
</div>
<hr class="linha" />
<div class="peca">
<label for="" class="peca-titulo">Foguetes</label>
<div class="controle">
<buttom class="controle-ajuste" data-controle="-" data-peca="foguetes">-</buttom>
<input type="text" class="controle-contador" value="00" data-contador/>
<buttom class="controle-ajuste" data-controle="+">+</buttom>
</div>
</div>
</div>
<input type="submit" value="Iniciar produção" class="producao" id="producao" />
</form>
</section>
</main>
<script src="js/main.js"></script>
const controle = document.querySelectorAll("[data-controle]");
const estatiticas = 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,
},
};
controle.forEach((elemento) => {
elemento.addEventListener("click", (evento) => {
manipulacaoDados(evento.target.dataset.controle, evento.target.parentNode);
atualizaEstatisticas(evento.target.dataset.peca);
});
});
function manipulacaoDados(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) {
estatiticas.forEach((elemento) => {
elemento.textContent = parseInt(elemento.textContent) + pecas[peca][elemento.dataset.estatistica]
});
}
Vc só colocou data-peca para o sinal de ( - )
Faltou para o sinal de ( + )
Vou usar um como exemplo, mas está faltando em todos
<div class="controle">
<buttom class="controle-ajuste" data-controle="-" data-peca="bracos">-</buttom>
<input type="text" class="controle-contador" value="00" data-contador />
<buttom class="controle-ajuste" data-controle="+" data-peca="bracos">+</buttom>
</div>
Obrigada, Luis