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

Só o força dá "NaN" o resto tá certo

o arquivo JS

const controle = document.querySelectorAll('[data-controle]')
const estatisticas = document.querySelectorAll('[data-estatisticas]')

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) => {
    elemento.textContent = parseInt(elemento.textContent) + pecas[peca][elemento.dataset.estatisticas]
  })
}
5 respostas

o HTML ta assim (eu coloquei o S no data-estatisticaS)

<body>
    <main>
        <section class="robotron">
            <img class="robo" src="img/robotron.png" alt="Robotron" id="robotron">
            <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-estatisticas="força">0</p>
                </div>
            </div>
            <div class="estatistica">
                <p class="estatistica-titulo">Poder</p>
                <div class="estatistica-valor">
                    <p class="estatistica-numero" data-estatisticas="poder">0</p>
                </div>
            </div>
            <div class="estatistica">
                <p class="estatistica-titulo">Energia</p>
                <div class="estatistica-valor">
                    <p class="estatistica-numero" data-estatisticas="energia">0</p>
                </div>
            </div>
            <div class="estatistica">
                <p class="estatistica-titulo">Velocidade</p>
                <div class="estatistica-valor">
                    <p class="estatistica-numero" data-estatisticas="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="+" 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>

    <script src="js/main.js"></script>
</body>

A unica coisa que estava dando erro uns videos atrás foi quando add a const pecas. Entre algum dos objs estava sem a virgula... até ai ok... agora, não sei o pq está tudo rodando lindo, porém a força sempre que atualiza da "NaN". tentei testar ate no html e colocar um numero alto pra quando atualizar, continuar "sendo um numero" uhauaha falhei miseralvelmente.

Se alguem achar o erro, agradeço (:

solução!

Boa noite André, basta alterar:

data-estatisticas="força" para data-estatisticas="forca"

Meu deus era isso mesmo. Acho que conforme fico cansado de olhar o olho so passa e não vê nada hahaha valeu mesmo!

Sim, é bem assim mesmo, acontece, hahahahah

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software