Counter and calculation in javascript

Question

Counter and calculation in javascript

Navigation

#1 by (3 votes)
#2 by (1 votes)

0

I need to get a value and divide by the amount entered in the input

<h2 class="m-b-0 text-white font-weight-normal" id="valortotal">R$ 4.000,00</h2></div>

Get this value and divide by the quantity you enter here:

<div style="border-color: #333 !important;" class="qty mt-6">
    <span class="minus">-</span>
    <input type="text" class="count" name="qty" value="1"> 
    <span class="plus">+</span>
</div>

And show the result:

<div  class="col-6">
    <h5 class="card-subtitle">Individual</h5>
    <h3 class="font-weight-bold">R$ 4.000,00</h3>
</div>

javascript html

asked by anonymous 21.12.2018 / 20:52

2 answers

1

If you just want to log the value and change the amount to be divided by the value, you can do this:

let valortotal = 4000;

    let calc = valortotal / document.getElementById('qtde').value;
    console.log('R$'+calc);

<h2 class="m-b-0 text-white font-weight-normal">R$ 4.000,00</h2></div>

<div style="border-color: #333 !important;" class="qty mt-6">
    <span class="minus">-</span>
    <input type="text" class="count" name="qty" id="qtde" value="4">
    <span class="plus">+</span>
</div>

<div  class="col-6">
    <h5 class="card-subtitle">Individual</h5>
    <h3 class="font-weight-bold">R$ 4.000,00</h3>
</div>

Now, if you want to do it more dynamically, you can do it as follows:

let valortotal = 4000;

    document.querySelector('#qtde').addEventListener('keypress', function (e) {
        let key = e.which || e.keyCode;
        if (key === 13) {
            let calc = valortotal / document.querySelector('#qtde').value;
            //console.log('R$'+calc);

            document.getElementById('resposta').innerHTML = 'R$'+calc;

        }
    });

<h2 class="m-b-0 text-white font-weight-normal">R$ 4.000,00</h2></div>

<div style="border-color: #333 !important;" class="qty mt-6">
    <span class="minus">-</span>
    <input type="text" class="count" name="qty" id="qtde">
    <span class="plus">+</span>
</div>

<div  class="col-6">
    <h5 class="card-subtitle">Individual</h5>
    <h3 class="font-weight-bold">R$ 4.000,00</h3>

</div>

<div id="resposta">
  <!--A resposta da divisão ficará aqui-->
</div>

When you enter the value you want to split the 4000 and press enter, the value will appear in the div with "response" id, in the future you can put the enter action on a button to make the layout look more beautiful,

I hope I have helped ^^

21.12.2018 / 21:24

Check If DataGridView field of type DataGridViewCheckBoxColumn is checked How to get the last record to the first

score 3 · Accepted Answer

id in elements for being unique identifiers
input type="number" min="1"
Dynamic form: onchange function
toLocaleString ('pt-BR') - converts Number to native currency string. Detail, legal, is safe from floating-point bug

    // Resultado bugado
    console.log(0.1+0.2);
    // Resultado sem bugs
    console.log((0.1+0.2).toLocaleString());

Code

//função para converter o valor em um numero que se possa utilizar em operações aritméticas.
function converteMoedaFloat(valor){
          
     if(valor === ""){
          valor =  0;
      }else{
          valor = valor.replace("R$ ","");
          valor = valor.replace(".","");
          valor = valor.replace(",",".");
          valor = parseFloat(valor);
       }
       return valor;
}

function calcular(){
    var valortotal=document.getElementById('valortotal').innerHTML;

    var valorConvertido = (converteMoedaFloat(valortotal));

    var qty=document.getElementById('qty').value;

    var result =(valorConvertido/qty);

    document.getElementById('resultado').innerHTML= (result.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' }));

}

    <h2 class="m-b-0 text-white font-weight-normal" id="valortotal">R$ 4.000,80</h2></div>


    <div style="border-color: #333 !important;" class="qty mt-6">
        
        <input type="number" class="count" id="qty" name="qty" value="1" min="1" onchange="calcular()"> 
       
    </div>


    <div  class="col-6">
        <h5 class="card-subtitle">Individual</h5>
        <h3 class="font-weight-bold" id="resultado">R$ 4.000,80</h3>
    </div>