Counter and calculation in javascript

Question

I need to take 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>

Take this value and divide by the quantity entered 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>

Answer 1

• id because they are unique

• input type="number" min="1"

• dynamic shape: onchange function

• toLocaleString('en-BR') - converts Numero to native String currency. 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>

Answer 2

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

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 this way:

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 type the value you want to divide the 4000 and press enter, the value will appear in the div with id "answer", in the future you can put the action of enter in a button for the layout to be more beautiful, however I believe I have removed your doubts

I hope I’ve helped ^^