0

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>

1
  • A medida dos botões é o segundo parâmetro da função calculo.
    – paulo lima
    Commented 6/01/2021 às 19:57

1 Resposta 1

0

Espero ajudar. Acredito que seu erro está no ParseInt, que arredonda seus valores que são de ponto flutuante.

Criei algumas funções pra tentar melhorar seu código.

var inputs;
var medidas = [
    { value: 1, amount: 0 },
    { value: 0.6, amount: 0 },
    { value: 1.1, amount: 0 },
    { value: 0.2, amount: 0 },
    { value: 0.5, amount: 0 }
]

function plus(idx) {
    let medida = this.medidas[idx];
    medida.amount = Number((medida.amount + 1).toFixed(1));
    this.change(idx);
}

function down(idx) {
    let medida = this.medidas[idx];
    if (medida.amount > 0) {
        medida.amount = Number((medida.amount - 1).toFixed(1));
    }
    this.change(idx);
}

function calc() {
    var soma = 0;
    for (const medida of this.medidas) {
        soma = Number((soma + (medida.value * medida.amount)).toFixed(1));
    }
    document.getElementById('result').innerHTML = soma;
}

function change(idx) {
    let input = this.inputs.item(idx)
    input.value = medidas[idx].amount;
    this.calc();
}

function createElements(){
    let itens = document.getElementsByClassName('itens')[0];
    for (let idx = 0; idx < this.medidas.length; idx++) {
        let div = document.createElement("div");
        div.classList.add("number-input");
        let down = document.createElement("button");
        down.setAttribute("onclick", `down(${idx})`);
        down.classList.add('down');
        let plus = document.createElement("button");
        plus.setAttribute("onclick", `plus(${idx})`);
        plus.classList.add('plus');
        let input = document.createElement('input');
        input.setAttribute("onchange", `change(${idx})`)
        input.setAttribute("min", "0")
        input.setAttribute("name", `valor${idx + 1}`)
        input.setAttribute("type", "number")
        input.setAttribute("value", "0")
        input.classList.add("valor")
        div.appendChild(down)
        div.appendChild(input)
        div.appendChild(plus)
        itens.appendChild(div);
    }
    this.inputs = document.getElementsByClassName('valor');
}

document.onload = (this.createElements());
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"></section>
        <h3>Medida Total</h3>
        <h3 id="result">0</h3>
    </main>

8
  • Nossa show, ontem estava tentando algo com objetos criei assim 'let medidas = {media1: 1, medida2: 0.6}', mas nem tão cedo ia chegar nessa logica sua, duas dúvidas na parte html, 1. Vi que no "result" vc mudou de class para id fora isso houve alguma outra mudança ? 2. Na função dos inputs eu declarei o segundo parâmetro que seria as medidas preciso mantê-los ou nessa sua logica não precisa ?
    – paulo lima
    Commented 10/01/2021 às 18:28
  • @paulo Eu mudei o "result" de class para id e removi as divs para serem criadas via script. Não fiz alterações no CSS. Da forma que fiz, as funções não precisam de mais parâmetros, pois a variável medidas é global e portanto todas as funções conseguem ler e alterar. Commented 10/01/2021 às 18:34
  • entao eu deixo a section normal dentro dela removo todas as divs ficando apenas os blocos de button input button ?
    – paulo lima
    Commented 10/01/2021 às 19:01
  • você pode deixar toda a <section> vazia. A função createElements() vai criar as div, os inputs e os buttons pra você, e de maneira dinâmica, pois ao alterar a variável medidas o html continuará funcionando. Mas se preferir ter todos os inputs estáticos no html você pode remover a função createElements() e apenas inicializar a variável inputs. Commented 10/01/2021 às 19:09
  • Foi o que pensei mas ao remover o conteúdo da section todos os botões sumiram :/ e no console aparece esse erro Uncaught TypeError: Cannot read property 'appendChild' of undefined at createElements ai aponta erro na linha 61 e 66 que são itens.appendChild(div); e document.onload = (this.createElements());
    – paulo lima
    Commented 10/01/2021 às 19:23

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .