Aos 3min de aula o professor, ao criar a função atualizaEstatisticas()
, dá um console.log. No entanto, no meu caso só funciona na linha dos braços. Para as outras peças o console retorna a seguinte mensagem:
Uncaught TypeError: Cannot read properties of null (reading 'value')
at manipulaDados (main.js:50:36)
at HTMLUnknownElement.<anonymous> (main.js:39:9)
manipulaDados @ main.js:50
Meu HTML:
<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">
<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">
<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">
<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">
<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>
Meu JavaScript:
const controle = document.querySelectorAll("[data-controle]");
const estatisticas = document.querySelectorAll("[data-estatistica]");
const pecas = { //omiti pra ficar menor
}
controle.forEach( (elemento) => { // Ao clicar no + ou no -
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) {
console.log(peca)
}
OBS: a linha 48 é "peca.value = parseInt(peca.value) - 1
" e 50, é "peca.value = parseInt(peca.value) + 1
". Na coluna 36 começa `value´