Adding variables from different functions in javascript during keyup

Question

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 ?

akhil.cs · Accepted Answer · 2016-11-24 10:41:41Z

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);
}

Nikolaj Grue Understrup · Accepted Answer · 2016-11-24 10:44:07Z

0

You are almost doing it right.

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

here you have declared your variables in the global space, but then you redeclare them locally inside the functions.

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

you have to remove var inside the functions.

answered Nov 24, 2016 at 10:44

Nikolaj Grue Understrup

266 bronze badges

4 Comments

user3526204 Over a year ago

But if I remove the vars from inside the functions, how do get the values from keyUps ?

Nikolaj Grue Understrup Over a year ago

you're not removing the variable. youre just changing

Nikolaj Grue Understrup Over a year ago

oops apparently i can't click enter. just change var x = $('#trousers').val(); to x = $('#trousers').val(); and var y2 = x * 49; to y2 = x * 49;

user3526204 Over a year ago

I am sure this option should work too only thing is, I guess i am unable to understand something you are trying to explain

Collectives™ on Stack Overflow

Adding variables from different functions in javascript during keyup

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related