Estou tentando fazer uma soma de medidas onde cada input tem o seu valor especifico, ex: input 1 tamanho 0.6 input 2 tamanho 1.2 e assim por diante, a ideia é pegar o valor do input registrado através dos botões + e - multiplicar pelo seu tamanho e em seguida somar todos os totais dos tamanhos registrados e apresentar no campo medida total.
No ponto que estou, após fazer alguns testes isolados acredito que a função esta mantendo o valor dos inputs e multiplicando pelo no valor adicionado.
Acredito que primeiramente terei que calcular e multiplicar isoladamente cada input ou grupo de inputs que contenham os mesmos valores e depois somar esses totais, porem estou com muita dificuldade para achar essa logica no js, alguem poderia me dar uma mão ? desde ja agradeço.
function calc_elementos() {
const elements = document.querySelectorAll('.valor');
var soma = 0;
Array.from(elements).forEach((element, index) => {
soma += parseInt(element.value, 10);
});
return soma;
}
function calculo(num, valor) {
document.querySelector('.resultado').innerHTML = ((calc_elementos() + num) * valor).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;
}
h3 {
display: flexbox;
}
<main>
<section class="itens">
<div class="number-input">
<button onclick="this.parentNode.querySelector('input[type=number]').stepDown(calculo(-1, 1))" class="down"></button>
<input class="valor" min="0" name="valor1" value="0" type="number">
<button onclick="this.parentNode.querySelector('input[type=number]').stepUp(calculo(1, 1))" class="plus"></button>
</div>
<div class="number-input">
<button onclick="this.parentNode.querySelector('input[type=number]').stepDown(calculo(-1, 0.6))" class="down"></button>
<input class="valor" min="0" name="valor2" value="0" type="number">
<button onclick="this.parentNode.querySelector('input[type=number]').stepUp(calculo(1, 0.6))" class="plus"></button>
</div>
<div class="number-input">
<button onclick="this.parentNode.querySelector('input[type=number]').stepDown(calculo(-1, 1.1))" class="down"></button>
<input class="valor" min="0" name="valor3" value="0" type="number">
<button onclick="this.parentNode.querySelector('input[type=number]').stepUp(calculo(1, 1.1))" class="plus"></button>
</div>
<div class="number-input">
<button onclick="this.parentNode.querySelector('input[type=number]').stepDown(calculo(-1, 0.2))" class="down"></button>
<input class="valor" min="0" name="valor3" value="0" type="number">
<button onclick="this.parentNode.querySelector('input[type=number]').stepUp(calculo(1, 0.2))" class="plus"></button>
</div>
<div class="number-input">
<button onclick="this.parentNode.querySelector('input[type=number]').stepDown(calculo(-1, 0.5))" class="down"></button>
<input class="valor" min="0" name="valor3" value="0" type="number">
<button onclick="this.parentNode.querySelector('input[type=number]').stepUp(calculo(1, 0.5))" class="plus"></button>
</div>
</section>
<h3>Medida Total</h3>
<h3 class="resultado">0</h3>
</main>