Fiz tudo o que o professor fez, coloquei os data-atribbutes
no HTML e adicionei a função atualizaEstatisticas()
, mas sempre que aperto no botão o console, ao invés de retornar os elementos selecionados, dá o seguinte erro:
Uncaught ReferenceError: peca is not defined
at manipulaDados (script.js:61:9)
at HTMLUnknownElement.<anonymous>
Meu script:
const controles = document.querySelectorAll('[data-controle]');
const estatisticas = document.querySelectorAll('[data-estatistica]');
const pecas = { //array de objetos
"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
}
}
controles.forEach(controle => {
controle.addEventListener("click", (evento) => {
manipulaDados(evento.target.dataset.controle, evento.target.parentNode);
atualizaEstatisticas(evento.target.dataset.peca);
});
});
function zeroEsquerda(numero) {
if (numero < 10) {
numero = `${0}${numero}`;
}
return numero;
}
function manipulaDados(operacao) {
if (operacao === "-") {
braco.value = parseInt(braco.value) - 1;
if (peca.value < 0) {
peca.value = 0;
}
} else {
peca.value = parseInt(peca.value) + 1;
}
peca.value = zeroEsquerda(peca.value);
}
function atualizaEstatisticas(peca) {
console.log(peca);
}