1

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>

1 Resposta 1

0

Você pode atribuir uma mesma classe para todos os inputs, selecionar eles com querySelectorAll e então passar um por um via forEach para fazer o cálculo:

const elements = document.querySelectorAll('.valor'); // classe utilizada para os inputs
var soma = 0;
Array.from(elements).forEach((element, index) => {
   soma += parseInt(element.value, 10);
});

Desta forma, sempre que quiser adicionar um novo, só precisa lembrar de colocar a classe que escolheu.

Também reparei que suas duas funções up()e down() fazem praticamente a mesma coisa, mudando apenas o valor -1 ou +1. Para otimizar as coisas, é sempre bom reaproveitar um código que você irá utilizar muitas vezes, tornando mais fácil manutenção, leitura, etc. Segue uma sugestã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){
      document.querySelector('.resultado').innerHTML = (((calc_elementos())+num)*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(calculo(-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))" class="plus"></button>
          </div>
      
          <div class="number-input">
              <button onclick="this.parentNode.querySelector('input[type=number]').stepDown(calculo(-1))" 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))" class="plus"></button>
          </div>
      
          <div class="number-input">
              <button onclick="this.parentNode.querySelector('input[type=number]').stepDown(calculo(-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))" class="plus"></button>
          </div>
      
          <h3 class="resultado">0</h3>
      
      </section>
      </main>

8
  • Nossa show de bola, realmente ficou muito melhor, obrigado pela resposta. Coloquei as suas correções no código completo funcionou 100% porém me surgiu uma nova dificuldade, vou explicar um pouco a finalidade de tudo isso, basicamente esses botões irão simular um calculador de metros cúbicos de moveis, onde a soma de todos os moveis adicionados me dará o cálculo total das medidas.
    – paulo lima
    Commented 5/01/2021 às 0:17
  • A dificuldade agora é que tenho varias medidas e não estou conseguindo fazer a soma entre eles, no exemplo usamos o valor 0.30, mas como eu faria para o input 1 adicionar 0.30 a cada clique e o 2 adicionar 0.60 por exemplo e assim por diante ? pensei em separar por classe o grupo de valores iguais e aplicar o valor no calculo dessa classe, tentei com if e else if, duas funções chamando classes diferentes e no fim somando os valores mas sem sucesso.
    – paulo lima
    Commented 5/01/2021 às 0:17
  • Dá pra fazer de várias formas, precisa mudar um pouquinho as coisas. Você pode adicionar um segundo parâmetro de valor para a função que faz o cálculo, então ela recebe esse parâmetro e calcula dentro da função mesmo. Por exemplo: calculo(1, 0.6). Aí passa para o calc_elementos que recebe esse mesmo número e faz a soma.
    – Lucius
    Commented 5/01/2021 às 14:50
  • Passei os valores como parâmetro na função do html, chamei esses dois parâmetros na função do js ficando assim calculo(num, valor) ai depois usei esses dois parâmetros no calc_elementos ficando assim ((calc_elementos() + num) * valor).toFixed(2). Até a adição do terceiro item funciona, a partir dai o calculo não funciona mais, conforme vou adicionando tem itens que soma valores totalmente fora e tem itens que subtrair mesmo eu clicando em +...
    – paulo lima
    Commented 5/01/2021 às 22:06
  • Acho que identifiquei onde esta o problema, acredito que seja no calculo com a função calc_elementos -> ((calc_elementos() + num) * valor) fui fazendo alguns testes isolados acredito que nesse caso as quantidades estão sendo mantidas porém ao adicionar um novo item ela pega a quantidade que ja existe multiplica pelo novo valor retornando um calculo divergente do esperado, que no caso seria a multiplicação isolada da quantidade de cada item e depois pegaria todos esses totais e somaria para apresentar a medida total de todos os itens.
    – paulo lima
    Commented 5/01/2021 às 23:31

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 .