Olá Suporte.
Analisei seu código e percebi alguns pontos que podem estar impedindo o funcionando do projeto como desejado:
- Uso da const peca - na nossa função manipulaDados() inicialmente para testes usamos o braco como medida para testar o funcionamento do nosso código, porém depois usamos o valor da própria constante peca, por englobar várias peças, sendo assim mudamos braco.value para peca.value:
if(operacao === "-") {
peca.value = parseInt(braco.value) - 1
} else {
peca.value = parseInt(braco.value) + 1
}
}
- manipulaDados() e atualizaEstatistica(): Para mantermos as nossa estatísticas atualizadas, além da criação da função precisamos aplica-la, nesse caso precisamos precisamos adicionar no nosso forEach. Além disso, como estamos usando data atributtes para identificar as operações de soma e diminuição, precisamos especificar no manipulaDados().
controle.forEach( (elemento) => {
elemento.addEventListener("click", (evento) => {
manipulaDados(evento.target.textContent, evento.target.parentNode)
})
})
Sendo assim, precisamos extrair na manipulaDados() do data atributte e implementar o uso de atualizaEstatistica():
manipulaDados(evento.target.dataset.controle, evento.target.parentNode)
atualizaEstatistica(evento.target.dataset.peca);
- data-peca: nesse caso, como estamos no evento de click coletando o dataset desse componente é importante esclarecermos de qual parte cada + e - estão sendo usados:
<div class="peca">
<label for="" class="peca-titulo">Braços</label>
<div class="controle">
<button class="controle-ajuste" data-controle="-">-</button>
<input type="text" class="controle-contador" value="00" data-contador>
<button class="controle-ajuste" data-controle="+">+</button>
</div>
</div>
Segue o código alterado com as mudanças:
<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" id="somar" data-controle="+" data-peca="bracos">+</buttom>
</div>
</div>
- Outro ponto importante é quanto a alteração dos dados na tela, a constante que armazena os dados da data-estatistica é criada no javascript, porém precisamos declarar esse data-atributte no html, onde eles serão retirados como mostra o exemplo abaixo:
<p class="estatistica-numero" data-estatistica="energia">289</p>
Prontinho! Acredito que dessa forma o código vai estar funcionando como desejado. Lembre-se sempre de testar o seu código com o andamento das atividades, continue estudando e se dedicando para ir cada vez mais longe.
Se precisar de ajuda ou tiver alguma dúvida, estou à disposição, conte comigo!
Um bom dia e bons estudos
Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓