Boa tarde. Estava fazendo aula e, de repente, quando fui testar a função atualizaEstatisticas, minha página ficou assim.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Boa tarde. Estava fazendo aula e, de repente, quando fui testar a função atualizaEstatisticas, minha página ficou assim.
Olá Gabriel, tudo bem?
Para que eu possa entender melhor o que pode estar ocorrendo e tentar te ajudar, peço que compartilhe seu código comigo, ta bem?
Fico no aguardo para mais informações, abraços!
Oi, Beatriz.
Essa é a parte do HTML:
<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">0</p>
</div>
</div>
<div class="estatistica">
<p class="estatistica-titulo">Poder</p>
<div class="estatistica-valor">
<p class="estatistica-numero" data-estatistica="poder">0</p>
</div>
</div>
<div class="estatistica">
<p class="estatistica-titulo">Energia</p>
<div class="estatistica-valor">
<p class="estatistica-numero" data-estatistica="energia">0</p>
</div>
</div>
<div class="estatistica">
<p class="estatistica-titulo">Velocidade</p>
<div class="estatistica-valor">
<p class="estatistica-numero" data-estatistica="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>E essa é a parte do JavaScript:
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": 4
},
"pernas": {
"forca": 27,
"poder": 21,
"energia": -32,
"velocidade": 43
},
"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.estatistica];
});
}Encontrei o erro! Faltou fechar as aspas duplas em um dos botões. Obrigado por se disponibilizar a ajudar. :)