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?

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