[Bug] Erro pecas is undefined so aparece na ultima linha

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]")

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

function atualizaEstatisticas (peca) {

    estatisticas.forEach( (elemento) => {
       console.log(elemento.dataset.estatistica)
        elemento.textContent = parseInt(elemento.textContent) + pecas[peca] [elemento.dataset.estatistica]

    })
 }

Desculpa se estiver baguncado, primeira vez que coloco meu codigo aqui, acho que nao sei fazer isso direito kk

Estava tudo funcionando ate a ultima funcao, quando eu tento criar a funcao atualizaEstatisticas (peca) a ferramenta do desenvolvedor mostra um erro que no visual code eu nao vejo, que fala que Uncaught TypeError: pecas[peca] is undefined Mas eu usei essa (peca) antes na funcao manipulaDados..

Assim que cria a function atualizaEstatisticas, o professor faz um console.log(peca) e um console.log(peca[pecas]) e os dois dao esse erro Uncaught TypeError: pecas[peca] is undefined

Onde esta errado?? Me da uma luz por favor. Nao consigo encontrar, estou seguindo o professor linha por linha. Send help!

Olá Samantha!

O erro ocorre porque a variável peca está vindo como undefined quando a função atualizaEstatisticas é chamada. Isso acontece porque o atributo data-peca está faltando nos botões de ajuste no seu HTML. É necessário adicionar o atributo data-peca aos botões para que a função atualizaEstatisticas possa receber o valor corretamente.

Aqui fica um exemplo de como pode adicionar

<div class="controle">
    <button class="controle-ajuste" data-controle="-" data-peca="bracos">-</button>
    <input type="text" class="controle-contador" value="00" data-contador>
    <button class="controle-ajuste" data-controle="+" data-peca="bracos">+</button>
</div>

Você precisa adicionar o atributo data-peca com o valor correspondente para cada botão de ajuste nas seções de Braços, Blindagem, Núcleos, Pernas e Foguetes.

Sua Section "equipamentos" 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">
                            <button class="controle-ajuste" data-controle="-" data-peca="bracos">-</button>
                            <input type="text" class="controle-contador" value="00" data-contador>
                            <button class="controle-ajuste" data-controle="+" data-peca="bracos">+</button>
                        </div>
                    </div>
                    <hr class="linha">
                    <div class="peca">
                        <label for="" class="peca-titulo">Blindagem</label>
                        <div class="controle">
                            <button class="controle-ajuste" data-controle="-" data-peca="blindagem">-</button>
                            <input type="text" class="controle-contador" value="00" data-contador>
                            <button class="controle-ajuste" data-controle="+" data-peca="blindagem">+</button>
                        </div>
                    </div>
                    <hr class="linha">
                    <div class="peca">
                        <label for="" class="peca-titulo">Núcleos</label>
                        <div class="controle">
                            <button class="controle-ajuste" data-controle="-" data-peca="nucleos">-</button>
                            <input type="text" class="controle-contador" value="00" data-contador>
                            <button class="controle-ajuste" data-controle="+" data-peca="nucleos">+</button>
                        </div>
                    </div>
                    <hr class="linha">
                    <div class="peca">
                        <label for="" class="peca-titulo">Pernas</label>
                        <div class="controle">
                            <button class="controle-ajuste" data-controle="-" data-peca="pernas">-</button>
                            <input type="text" class="controle-contador" value="00" data-contador>
                            <button class="controle-ajuste" data-controle="+" data-peca="pernas">+</button>
                        </div>
                    </div>
                    <hr class="linha">
                    <div class="peca">
                        <label for="" class="peca-titulo">Foguetes</label>
                        <div class="controle">
                            <button class="controle-ajuste" data-controle="-" data-peca="foguetes">-</button>
                            <input type="text" class="controle-contador" value="00" data-contador>
                            <button class="controle-ajuste" data-controle="+" data-peca="foguetes">+</button>
                        </div>
                    </div>
                </div>
                <input type="submit" value="Iniciar produção" class="producao" id="producao">
            </form>
        </section>

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

Sucesso

Um grande abraço e até mais!

conseguiu resolver Samantha Rodrigues ? se não tiver resolvido compartilha o link do seu github aqui para ajudar também. mas acredito que a dita do instrutor acima deve solucionar.

Foi isso mesmo, deu certo. Ele usou o comando crtl+D pra selecionar e eu nao vi todas as linhas que foram alteradas. Muuuuito obrigada!!!

parabéns por ter conseguido arrumar, depois não esquece de marcar o comentário como resposta para o topico ficar solucionado.

Bons estudos.