Estou recebendo a seguinte mensagem de erro no console do navegador:
Uncaught TypeError: Cannot read properties of undefined (reading 'forca')
at script.js:72:83
at NodeList.forEach (<anonymous>)
at atualizaEstatisticas (script.js:71:18)
at HTMLUnknownElement.<anonymous> (script.js:44:9)
Meu js:
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, controle) {
const peca = controle.querySelector("[data-contador]");
if (operacao === "-") {
peca.value = parseInt(peca.value) - 1;
if (peca.value < 0) {
peca.value = 0;
}
} else {
peca.value = parseInt(peca.value) + 1;
}
peca.value = zeroEsquerda(peca.value);
}
function atualizaEstatisticas(pcEscolhida) {
estatisticas.forEach(elemento => {
elemento.textContent = parseInt(elemento.textContent) + pecas[pcEscolhida][elemento.dataset.estatistica]
});
}
O que estou fazendo de errado?