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

[BUG ]Uncaught TypeError: can't access property

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?

Matricule-se agora e aproveite até 50% OFF

O maior desconto do ano para você evoluir com a maior escola de tecnologia

QUERO APROVEITAR
4 respostas
Robotron ROBOTRON 2000
    <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]
  });
}
solução!

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