Key up function calculation

hi there, In the above codepen I am trying to manifest: Principal amount + %age of tax added to the principal amount and then published in the disabled box in real-time. I am using the Keyup function.

Issue:

I think some calculation logic is wrong. I was expecting If I enter Principal amount as 500 and tax as 10% then I should get total 550 in real time.

Here’s a severe simplification of your code, and it works.

Remove princi class from the tax

    <h3>The Tax percentage(%)</h3>
<!--<input type="text" name="" class="princi taxamt">-->
    <input type="text" name="" class="taxamt">

And multiply by 1.10 to add 10 percent.

$(".princi, .taxamt").keyup(function(){  
  var princAmt = $(".princi").val();
  var taxAmt  = $(".taxamt").val();
  var percentage = 1 + taxAmt / 100;
  $(".total").val(princAmt * percentage);
});
1 Like

Thanks sir, I didnt knew this could be possible.

You are a genius! Not because you are a PRO in JS/JQuery(we all know you are), but how smartly you used maths.

1 Like

It is a wonderful experience to learn with you. Thank you for all the help, and the days to come.

Hi there, if we do this with Vanilla JS then what changes should we make

Here’s the jQuery code version of it:

$(".princi, .taxamt").keyup(function(){  
  var princAmt = $(".princi").val();
  var taxAmt  = $(".taxamt").val();
  var percentage = 1 + taxAmt / 100;
  $(".total").val(princAmt * percentage);
});

The $(".princi, .taxamt") part is where we use querySelectorAll instead, ans we assign to a local variable otherwise lines get too long.

var inputs = document.querySelectorAll(".princi, .taxamt");

The .keyup part gets applied to all of those inputs, so we must loop through those inputs, using addEventListener to add the event.

var inputs = document.querySelectorAll(".princi, .taxamt");
inputs.forEach(function(input) {
    input.addEventListener("keyup", function () {
        ...
    });
});

The contents in the function are quite straight forward too. Although, as you have multiple different types of elements with the same class name (that’s a bad practice), I need to use input.total instead of .total.

var inputs = document.querySelectorAll(".princi, .taxamt");
inputs.forEach(function(input) {
    input.addEventListener("keyup", function () {
        var princAmt = document.querySelector(".princi").value;
        var taxAmt  = document.querySelector(".taxamt").value;
        var percentage = 1 + taxAmt / 100;
        document.querySelector("input.total").value = princAmt * percentage;
    });
});

There you go, fully working as vanilla JavaScript.

Improvements are to name the functions:

var inputs = document.querySelectorAll(".princi, .taxamt");
inputs.forEach(function addTaxUpdateEvent(input) {
    input.addEventListener("keyup", function inputKeyupHandler() {
        var princAmt = document.querySelector(".princi").value;
        var taxAmt  = document.querySelector(".taxamt").value;
        var percentage = 1 + taxAmt / 100;
        document.querySelector("input.total").value = princAmt * percentage;
    });
});

The triangular shape of the text indents tends to be a bad sign, as it indicates that many nested things are happening, which can be difficult for us to reason about and understand.

As a result it’s beneficial to extract out those functions, which gives us a better understanding of how they connect together.

function taxUpdateHandler() {
    var princAmt = document.querySelector(".princi").value;
    var taxAmt  = document.querySelector(".taxamt").value;
    var percentage = 1 + taxAmt / 100;
    document.querySelector("input.total").value = princAmt * percentage;
}
function addTaxUpdateListener(input) {
    input.addEventListener("keyup", taxUpdateHandler);
}
var inputs = document.querySelectorAll(".princi, .taxamt");
inputs.forEach(addTaxUpdateListener);
2 Likes

As a flavorant, you may want to tweak that multiplication to trim to the nearest whole-value, as you’re talking about money here, and should handle the output as currency dictates (2 decimal places in a deciamalized system, whole numbers in others, etc.)

1 Like

Good point. I wouldn’t change the amount in variables, but just affect the displayed value instead, using either the Math.floor or the Math.round methods to achieve it.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.