Estou com um projeto de cálculo de itens onde ao clicar nos botões +
ou -
tenho um campo que faz os cálculos automaticamente.
O problema é que dessa forma eu tenho que criar uma variável para cada item e no total são mais de 40 itens, aí fica inviável criar esse tanto de variáveis fora também fazer os cálculos.
Queria pedir a ajuda de vocês para avaliar o código e ver se conseguem uma logica mais viável.
function up() {
var valor1 = parseInt(document.querySelector('.valor1').value,10);
var valor2 = parseInt(document.querySelector('.valor2').value,10);
var valor3 = parseInt(document.querySelector('.valor3').value,10);
document.querySelector('.resultado').innerHTML = (((valor1 + valor2 + valor3)+1)*0.30).toFixed(2);
}
function down() {
var valor1 = parseInt(document.querySelector('.valor1').value,10);
var valor2 = parseInt(document.querySelector('.valor2').value,10);
var valor3 = parseInt(document.querySelector('.valor3').value,10);
document.querySelector('.resultado').innerHTML = (((valor1 + valor2 + valor3)-1)*0.30).toFixed(2);
}
input[type="number"] {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
.number-input {
border: 1px solid #ddd;
display: inline-flex;
}
.number-input button.plus {
background-color: #2eb82e ;
}
.number-input button.down {
background-color: gainsboro ;
}
.number-input,
.number-input * {
box-sizing: border-box;
}
.number-input button {
outline:none;
-webkit-appearance: none;
background-color: transparent;
border: none;
align-items: center;
justify-content: center;
width: 1rem;
height: 1rem;
cursor: pointer;
margin: 0;
position: relative;
}
.number-input button:before,
.number-input button:after {
display: inline-block;
position: absolute;
content: '';
width: 0.5rem;
height: 1px;
background-color: #212121;
transform: translate(-50%, -50%);
}
.number-input button.plus:after {
transform: translate(-50%, -50%) rotate(90deg);
}
.number-input input[type=number] {
font-family: sans-serif;
max-width: 2rem;
padding: .1rem;
border: solid #ddd;
border-width: 0 1.5px;
font-size: 1rem;
height: 1rem;
text-align: center;
}
<main>
<section class="itens">
<div class="number-input">
<button onclick="this.parentNode.querySelector('input[type=number]').stepDown(down())" class= "down"></button>
<input class="valor1" min="0" name="valor1" value="0" type="number">
<button onclick="this.parentNode.querySelector('input[type=number]').stepUp(up())" class="plus"></button>
</div>
<div class="number-input">
<button onclick="this.parentNode.querySelector('input[type=number]').stepDown(down())" class= "down"></button>
<input class="valor2" min="0" name="valor2" value="0" type="number">
<button onclick="this.parentNode.querySelector('input[type=number]').stepUp(up())" class="plus"></button>
</div>
<div class="number-input">
<button onclick="this.parentNode.querySelector('input[type=number]').stepDown(down())" class= "down"></button>
<input class="valor3" min="0" name="valor3" value="0" type="number">
<button onclick="this.parentNode.querySelector('input[type=number]').stepUp(up())" class="plus"></button>
</div>
<h3 class="resultado">0</h3>
</section>
</main>