Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Uncaught ReferenceError: peca is not defined

Referente ao curso JavaScript: manipulando o DOM, no capítulo Calculando o poder e atividade Cálculos dinâmicos

por Helena de Souza Araújo Maia
| 86.6k xp | 43 posts
Desenvolvedora Front-End Junior

Gente, simplesmente peca não é definido Não sei o que está errado, alguém consegue identificar ? ps: vou deixar o html aqui tb caso tenha algo a ver

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(elemento.dataset.controle, elemento.parentNode)
    atualizaEstatisticas(elemento.dataset.peca)
  })
})

function manipulaDados(operacao, controle){
  const peca = controle.querySelector('[data-contador]')
  if(operacao === "+"){
    peca.value = parseInt(peca.value) + 1
  }else{
    if(peca.value != 0){
      peca.value = parseInt(peca.value) - 1
    }
  }
}

function atualizaEstatisticas(peca){
  console.log(peca)
}
4 respostas
por Helena de Souza Araújo Maia
| 86.6k xp | 43 posts
Desenvolvedora Front-End Junior

segue o html, não coube na questão

<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="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-pecas="bracos">-</buttom>
                            <input type="text" class="controle-contador" value="00" data-contador>
                            <buttom class="controle-ajuste" data-controle="+" data-pecas="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-pecas="blindagem">-</buttom>
                            <input type="text" class="controle-contador" value="00" data-contador>
                            <buttom class="controle-ajuste" data-controle="+" data-pecas="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-pecas="nucleos">-</buttom>
                            <input type="text" class="controle-contador" value="00" data-contador>
                            <buttom class="controle-ajuste" data-controle="+" data-pecas="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-pecas="pernas">-</buttom>
                            <input type="text" class="controle-contador" value="00" data-contador>
                            <buttom class="controle-ajuste" data-controle="+" data-pecas="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-pecas="foguetes">-</buttom>
                            <input type="text" class="controle-contador" value="00" data-contador>
                            <buttom class="controle-ajuste" data-controle="+" data-pecas="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>
por Josué Lustosa De Carvalho Filho
| 17.2k xp | 13 posts
Desenvolvedor Front-end

Olá, Helena.

Quando você chama as funções manipulaDados e atualizaEstatisticas no forEach, você deve passar o evento, dessa forma:

manipulaDados(evento.target.dataset.controle, evento.target.parentNode); atualizaEstatistica(evento.target.dataset.peca, evento.target.dataset.controle );

No seu caso, você está passando elemento.

Caso não seja isso, por favor nos informe. Bons estudos :)

solução!
por eduevaristo_dev
| 103.8k xp | 8 posts
Desenvolvedor Web Fullstack Júnior

Olá Helena, boa tarde!

Exatamente, Josué localizou outro problema. Mas um outro problema está ligado diretamente na chamada do dataset na função atualizaEstatisticas no forEach do controle. Você informou no HTML o dataset "pecas" e está tentando acessar o dataset "peca".

Confira o seu código abaixo, onde mostro somente o exemplo dos "braços":

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

E agora, segue abaixo de como você está recebendo o dataset no JS dentro da função atualizaEstatisticas:

controle.forEach( (elemento) => {
  elemento.addEventListener('click', (evento) => {
    manipulaDados(elemento.dataset.controle, elemento.parentNode)
    atualizaEstatisticas(elemento.dataset.peca)
  })
})

Espero ter ajudado. Bons estudos!

por Helena de Souza Araújo Maia
| 86.6k xp | 43 posts
Desenvolvedora Front-End Junior

ORBIGADA!! Consegui kkkkkk, já tinha desistido desse projeto

Agora me corrijam se estou errada: com base nos meus testes, o elemento, da um resultado igual a evento.target, pq dando console.log() nos dois eu obtenho o mesmo resultado... Por isso eu só declaro evento como argumento quando for necessário, por exemplo usando um evento.preventDeafult que preciso só do evento. Fora isso uso diretamente o seletor elemento para deixar o código mais legível. Caso seja um equívoco me avisem :)