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

[Dúvida] O que significa

O código estava funcionando só para o botão de "-", aí eu fui recarregar a página e começou a dar undefined do nada. Não sei como aconteceu, o que está errado e como faço para corrigir. JS

const controle = document.querySelectorAll("[data-controle]");
const estatisticas = document.querySelectorAll("[data-estatistica]");
const pecas = {...}
controle.forEach( (elemento) => {
    elemento.addEventListener("click", (evento) => { 
        evento.preventDefault();
        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(pecas[peca]);

    estatisticas.forEach((item) => {
        console.log(item.textContent);
    })
}
2 respostas

HTML (não cabia tudo dentro da mesma caixa de pergunta)

<body>
    <main>
        <section class="robotron">
            <img class="robo" src="img/robotronAmarelo.png" alt="Robotron" id="robotronUm">
            <figcaption class="titulo">ROBOTRON <br>2000</figcaption>
        </section>

        <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">768</p>
                </div>
            </div>
            <div class="estatistica">
                <p class="estatistica-titulo">Poder</p>
                <div class="estatistica-valor">
                    <p class="estatistica-numero" data-estatistica="poder">630</p>
                </div>
            </div>
            <div class="estatistica">
                <p class="estatistica-titulo">Energia</p>
                <div class="estatistica-valor">
                    <p class="estatistica-numero" data-estatistica="energia">289</p>
                </div>
            </div>
            <div class="estatistica">
                <p class="estatistica-titulo">Velocidade</p>
                <div class="estatistica-valor">
                    <p class="estatistica-numero" data-estatistica="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">
                            <button class="controle-ajuste" id="subtrair" data-controle="-" data-peca="bracos">-</button>
                            <input type="text" class="controle-contador" value="00" id="braco" data-contador>
                            <button class="controle-ajuste" id="somar" data-controle="+">+</button>
                        </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="nucleo">-</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>
</body>
solução!

Encontrei os erros...

  • 1- não tinha colocado o data-peca nas tags com o "+"
  • 2- os identificadores dentro do data-peca = "" não estavam idênticos aos objetos dentro da const pecas
  • 3- O layout da página voltou ao normal quando eu ajustei o zoom para 75%