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

[Bug] Uncaught TypeError: Cannot read properties of undefined (reading ' forca ')

pelo que eu entedi, o hmtl de força não ta sendo encontrado mas eu revisei e não deu e nada.

"Uncaught TypeError: Cannot read properties of undefined (reading ' forca ')
    at main.js:160:51
    at NodeList.forEach (<anonymous>)
    at atualizaEstatisticas (main.js:158:16)
    at HTMLUnknownElement.<anonymous> (main.js:143:5)"

O que apareceu pra mim.

    const controle = document.querySelectorAll("[data-controle]");
const estatisticas = 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);
    atualizaEstatisticas(evento.target.dataset.peca);
  });
});

function manipulaDados(operacao, controle) {
  const peca = controle.querySelector("[data-contador]");
3 respostas
  
                        <label for="" class="peca-titulo">Núcleos</label>
                        <div class="controle">
                            <buttom class="controle-ajuste" data-controle="-" data-peca="Núcleos">-</buttom>
                            <input type="text" class="controle-contador" value="00" data-contador>
                            <buttom class="controle-ajuste" data-controle="+" data-peca="Núcleos">+</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="+" data-peca="Pernas">+</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="+"  data-peca="Foguetes">+</buttom>
                        </div>
                    </div>
                </div>
                <input type="submit" value="Iniciar produção" class="producao" id="producao">
            </form>
        </section>
    </main>
</body>
<script src="js/main.js"></script> 
</html>`
solução!

Olá, Nycolle!

Seu erro acontece, pois dentro do HTML das peças no data-peca, você utiliza letras maiúsculas, mas no seu javascript você utiliza letra minusculas como, por exemplo, em data-peca="Foguetes", você utiliza:

"foguetes": {
    "forca": 0,
    "poder": 28,
    "energia": 0,
    "velocidade": -2
  }

Ou seja, dentro de cada data-peca você deve utilizar letra minusculas como no seu arquivo JS, seu código HTML completo fica assim:

    <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="+" data-peca="bracos">+</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="+" data-peca="blindagem">+</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="+" data-peca="nucleos">+</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="+" data-peca="pernas">+</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="+"  data-peca="foguetes">+</buttom>
                        </div>
                    </div>
                </div>
                <input type="submit" value="Iniciar produção" class="producao" id="producao">
            </form>
        </section>
    </main>

Espero ter ajudado, qualquer dúvida, me coloco à disposição! Bons estudos!

Sucesso

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

MUITO OBRIGADA