JS - Multiply and Show in text

Asked

Viewed 179 times

1

Hello,

I would like to create a code that multiplies the Client’s input into the Input text field.

This multiplication would be...

Valor de taxa = 0.8;
Valor do Cliente = "O valor inserido"

Valor do Cliente * Valor de taxa.

I would like it to appear in text... As I do?

JAVASCRIPT

function calculate() {

var coins = document.getElementById('number').value;
var rate = 0.8;
var total = coins * rate;

}
javascript

  • What do you already know about JS? Do you know how to fetch the values of an HTML field? Or will you not have the HTML interface in this problem? Where exactly you’re struggling?

  • difficulty in creating the javascript script so that it appears in text when the client inserts a numbero. It could help?

  • And how this user number will be read?

  • The user number will be read by INPUT TYPE = TEXT

  • So asking again, you already know how to fetch the value of a input HTML with JS? If so, show that you have already developed something and add the code to the question. In fact, seek to make a [mcve] showing what you want to do.

  • i have already made the javascript function but I want it to automatically look in text soon when the client put 1 number... it will calculate simply, I will go by code above.

Show 1 more comment

2 answers

1

Through this example Jquery you can suit your needs:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script>

<input type="text" id="valor_do_cliente">
<span id="resultado">0</span>

<script type="text/javascript">
    var taxa = 0.8;
    $('#valor_do_cliente').keyup(function(){
        var valor = $('#valor_do_cliente').val();
        var resultado = Math.ceil(valor * taxa);
        $('#resultado').html(resultado);
    });
</script>

  • 1

    friend is not what I’m looking for, I look for when you enter a number, it type in TEXT or DIV the value already calculated. No need to Submit

  • ready little friend, response edited according to your need

  • 1

    Ok.. and if the input is empty.. how do I make it 0 in the text?

  • Just like in the issue I made, you can leave a 0 where will print the result, so once you type goes changing

  • 1

    ok.. this way is great and Agradeco, but only 1 more thing. It is in decimal.. as aredondo example.. Customer put 1 it gets 0.8... rounding would be 1 ....?

  • Already edited accordingly. If it is the answer you were looking for, please mark as correct answer. Thank you for being able to help

Show 1 more comment

1

You can "watch" your input and whenever there is any change in it, it would trigger the function with the desired logic!

$( document ).ready(function() {
    var input1 = $("#valor_unitario");
    var result = $("#result");
    
    $(input1).on("change keyup paste", function(){
      var resultado = $(input1).val() * 0.8;
      result.html(resultado);
    })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="valor_unitario">Vlr. Unit.</label>
<input type="text" name="valor_unitario" id="valor_unitario" style="text-align: center" required>
<p>Resultado: <span id="result"></span></p>

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.