Skip to main content
edicionado code snippet para ajudar no teste da resposta
Fonte Link
BrTkCa
  • 11,3mil
  • 3
  • 21
  • 35
    <script>
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);
}
</script>

<style>
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;
    
}

 </style>

<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>

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>

    <script>
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);
}
</script>

<style>
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;
    
}

 </style>

<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>

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>

Fonte Link

Calculo javascript

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.

    <script>
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);
}
</script>

<style>
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;
    
}

 </style>

<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>