Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

estatísticas apenas somam

Mesmo quando eu removo uma peça os valores são somados nas estatísticas.

O meu arquivo JS está assim:

const controle = document.querySelectorAll("[data-controle]");
const estatistica = 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) => {
    manipulaDados(evento.target.dataset.controle, evento.target.parentNode);
    atualizaEstatistica(evento.target.dataset.peca);
  })
})

function manipulaDados(operacao, controle) {
  const peca = controle.querySelector("[data-contador]");

  if(operacao == "-") {
      peca.value = parseInt(peca.value) - 1;
  } else if(operacao == "+") {
      peca.value = parseInt(peca.value) + 1;
  }
}

function atualizaEstatistica(peca) {

  estatistica.forEach( (elemento) => {
    elemento.textContent = parseInt(elemento.textContent) + pecas[peca][elemento.dataset.estatistica];
  })
}
2 respostas
solução!

Uma forma de resolver é refatorando a função atualizaEstatistica e adicionando um if, aí da para deixar os cálculos mais dinâmicos. Quando a função for chamada passar o mesmo parâmetro da manipulaDados. Agora acho que ficou certo!

const controle = document.querySelectorAll("[data-controle]");
const estatistica = 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) => {
    manipulaDados(evento.target.dataset.controle, evento.target.parentNode);
    atualizaEstatistica(evento.target.dataset.peca, evento.target.dataset.controle);
  })
})

function manipulaDados(operacao, controle) {
  const peca = controle.querySelector("[data-contador]");

  if(operacao == "-") {
      peca.value = parseInt(peca.value) - 1;
  } else if(operacao == "+") {
      peca.value = parseInt(peca.value) + 1;
  }
}

function atualizaEstatistica(peca, operacao) {
  if(operacao === "+") {
    estatistica.forEach( (elemento) => {
      elemento.textContent = parseInt(elemento.textContent) + pecas[peca][elemento.dataset.estatistica];
    })
  } else {
    estatistica.forEach( (elemento) => {
      elemento.textContent = parseInt(elemento.textContent) - pecas[peca][elemento.dataset.estatistica];
    })
  }
}

Oi Matheus, tudo bem?

Muito obrigada por compartilhar com a gente a sua solução. Gostei bastante :D

Com certeza vai ajudar outras pessoas.

Um abraço e bons estudos.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software