user3526204 user3526204 - 11 days ago 5
HTML Question

Adding variables from different functions in javascript during keyup

Again, to clear at outset, I am not trained in javascript...so please excuse my ignorance of the language

I am trying to create a form on my website to calculate the total value of items based on the total quantity of each item chosen by the customer with Javascript. And each of the individual totals to be shown next to the form and the grand total at the end of the form which will be update as and when he enter each item quantity.

for example;

Shirts : Choose qty 2 and 200 will be displayed next to it @200 per shirt

Trousers : Choose qty 3 and 450 will be displayed next to it @150 per pant

Jeans : Choose qty 1 and 200 will be displayed next to it @200 per pant

Total value 850 ((2 x 100) + (3 x 150)) will be displayed below the form

And this total has to be updated and displayed at the bottom of the form as and when the customer enters his choice of each item

what i have is :

HTML

<p><span>Shirt/s </span><input type="number" name="Shirts" placeholder="Shirt/s" value="0" id="shirts">&nbsp;&nbsp;<span class="shirtscost">0</span><br></p>
<p><span>Trousers </span> <input type="number" name="Trousers" placeholder="Trousers" value="0" id="trousers">&nbsp;&nbsp;<span class="trouserscost">0</span><br></p>
<p><span>Jeans </span> <input type="number" name="Jeans" placeholder="Jeans" value="0" id="jeans">&nbsp;&nbsp;<span class="jeanscost">0</span><br></p>

<div id="totalcost"></div>


JS

var x = 0;
var y1 = 0;
var y2 = 0;
var y3 = 0;


$("#shirts").keyup(function(){
var x = $('#shirts').val();
//alert(x);
var y1 = x * 49;
$(".shirtscost").css("background-color", "pink").html("Rs."+y1);

});
$("#trousers").keyup(function(){
var x = $('#trousers').val();
//alert(x);
var y2 = x * 49;
$(".trouserscost").css("background-color", "pink").html("Rs."+y2);
});
$("#jeans").keyup(function(){
var x = $('#jeans').val();
//alert(x);
var y3 = x * 49;
$(".jeanscost").css("background-color", "pink").html("Rs."+y3);

});
var tot=y1 + y2 + y3 + y4 + y5 + y6 + y7+ y8 + y9 + y11;
$("#totalcost").css("background-color", "pink").html("Rs."+tot);


Obviously this is not working as I think the variables and its value in each function is not being accessed out side of it. I tried putting the last two lines inside each function. But that gives only the individual total in the grand total area.

How do I add up all the individual y1, y2 and y3 values and get it in the "totalcost" div as and when each qty is entered in each item's input field ?

Answer

Create a function to calculate and render total, and call that function from every other keyup listeners, eg,

$("#shirts").keyup(function(){
    var x = $('#shirts').val();
    //alert(x);     
    var y1 = x * 49;
    $(".shirtscost").css("background-color", "pink").html("Rs."+y1);
    total();

});

$("#trousers").keyup(function(){
    var x = $('#trousers').val();
    //alert(x);     
    var y2 = x * 49;
    $(".trouserscost").css("background-color", "pink").html("Rs."+y2);
    total();
});
$("#jeans").keyup(function(){
    var x = $('#jeans').val();
    //alert(x);     
    var y3 = x * 49;
    $(".jeanscost").css("background-color", "pink").html("Rs."+y3);

    total();
});

function total () {
    var total = $('#shirts').val()*49 + $('#trousers').val()*49 + $('#jeans').val()*49;

    $("#totalcost").css("background-color", "pink").html("Rs."+total);
}
Comments