5
respostas

undefined

const controle = document.querySelectorAll("[data-controle]")
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
    }
}
const estatistica = document.querySelectorAll("[data-estatisticas]")


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) {
    console.log(peca)
}

Bom, quando tento dar um console em "peca" e retornado no console undefined.

5 respostas

meu html que eu esqueci de postar!

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-estatisticas="forca">768</p>
            </div>
        </div>
        <div class="estatistica">
            <p class="estatistica-titulo">Poder</p>
            <div class="estatistica-valor">
                <p class="estatistica-numero" data-estatisticas="poder">630</p>
            </div>
        </div>
        <div class="estatistica">
            <p class="estatistica-titulo">Energia</p>
            <div class="estatistica-valor">
                <p class="estatistica-numero" data-estatisticas="energia">289</p>
            </div>
        </div>
        <div class="estatistica">
            <p class="estatistica-titulo">Velocidade</p>
            <div class="estatistica-valor">
                <p class="estatistica-numero" data-estatisticas="velocidade">597</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="+" 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>

Bom dia Diego, Copiei e colei seu código para testar e não deu undefined como você mencionou acima:

resultado do codigo acima

o meu continua dando undefined!!

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Posta seu HTML inteiro aqui