Javascripit
const controle = document.querySelectorAll("[data-controle]")
controle.forEach((elemento) => {
elemento.addEventListener("click", (evento) => {
manipulaDados(evento.target.dataset.controle, evento.target.patentNode)
})
})
function manipulaDados(operacao, controle ) {
const peca = document.querySelector("[data-contador]")
if (operacao === "-") {
peca.value = parseInt(peca.value) - 1
} else {
peca.value = parseInt(peca.value) + 1
}
}
HTML
<div class="controle">
<buttom class="controle-ajuste" data-controle="-" >-</buttom>
<input type="text" class="controle-contador" value="00" data-contador>
<buttom class="controle-ajuste" data-controle="+">+</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="-">-</buttom>
<input type="text" class="controle-contador" value="00" data-contador>
<buttom class="controle-ajuste" data-controle="+"></buttom>>+</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="-">-</buttom>
<input type="text" class="controle-contador" value="00" data-contador>
<buttom class="controle-ajuste" data-controle="+"></buttom>>+</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="-">-</buttom>
<input type="text" class="controle-contador" value="00" data-contador>
<buttom class="controle-ajuste" data-controle="+"></buttom>>+</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="-">-</buttom>
<input type="text" class="controle-contador" value="00" data-contador>
<buttom class="controle-ajuste" data-controle="+"></buttom>>+</buttom>
</div>
</div>
</div>
<input type="submit" value="Iniciar produção" class="producao" id="producao">
</form>
</section>
</main>
<script src="js/main.js"></script>
</body>
</html>