I'm creating a cumulative GPA calculator and I can't get the calculator to output any values. Is there anything I'm doing wrong with the code or calculation?
<div id="Cumulative GPA" class="tabcontent">
<p2>Cumulative GPA <b>before</b> this semester:</p2>
<input type="number" id="oldcumulativegpa">
<br />
<p2><b>Number of semesters</b> your Old Cumulative GPA was calculated with:</p2>
<input type="number" id="numberofsemesters">
<br />
<p2>Your GPA <b>this semester</b>:</p2>
<input type="number" id="currentsemestergpa">
<script>
document.getElementById("oldcumulativegpa").onkeydown = function() {myJsFunction()};
function myJsFunction() {
var oldcumulativegpa = document.getElementById('oldcumulativegpa').value;
var currentsemestergpa = document.getElementById('currentsemestergpa').value;
var numberofsemesters = document.getElementById('numberofsemesters').value;
newcumulativegpa = (oldcumulativegpa*numberofsemesters + currentsemestergpa)/(numberofsemesters + 1);
}
</script>
<p2>Your <b>New Cumulative GPA:</p2>
<p id="newcumulativegpa"></p>
</div>
You have several issues:
The #newcumulativegpa element doesn't exist when you run your <script>
You aren't getting the #newcumulativegpa element, you are creating a global variable newcumulativegpa and assigning to it.
There is no such thing as a <p2> tag
You are only running your function when a key is pressed in the #oldcumulativegpa element
The value property of <input type="number"> is a String. You need to parseFloat(el, 10) to turn it into a Number
Please also see this question, Where should I put tags in HTML markup? about what I mean when I say "#newcumulativegpa element doesn't exist when you run your <script>" doesn't exist when you run your script.
I'm calling that out explicitly because the following runnable script won't demonstrate it well enough.
const oldCumulativeGPAElement = document.getElementById("oldcumulativegpa");
const currentSemesterGPAElement = document.getElementById("currentsemestergpa");
const numberOfSemestersElement = document.getElementById("numberofsemesters");
const newCumulativeGPAElement = document.getElementById('newcumulativegpa');
function updateGPA() {
const oldCumGPA = parseFloat(oldCumulativeGPAElement.value, 10);
const numSemesters = parseFloat(numberOfSemestersElement.value, 10);
const currSemesterGPA = parseFloat(currentSemesterGPAElement.value, 10);
/*
* Test case:
* 4, 3, 3 should show 3.75
*/
const newCumulativeGPA = (
(oldCumGPA * numSemesters) + currSemesterGPA
) / (numSemesters + 1);
newCumulativeGPAElement.innerHTML = newCumulativeGPA;
}
[
oldCumulativeGPAElement,
currentSemesterGPAElement,
numberOfSemestersElement
].forEach(el => el.addEventListener("change", updateGPA));
updateGPA()
<div id="Cumulative GPA" class="tabcontent">
<ul>
<li>
<label>
<span>Cumulative GPA <b>before</b> this semester:</span>
<input type="number" min="0" max="4" step="1" id="oldcumulativegpa" value="4" placeholder="Cumulative GPA">
</label>
</li>
<li>
<label>
<span><b>Number of semesters</b> your Old Cumulative GPA was calculated with:</span>
<input type="number" min="1" step="1" placeholder="Number of semesters" id="numberofsemesters" value="3">
</label>
</li>
<li>
<label>
<span>Your GPA <b>this semester</b>:</span>
<input type="number" min="0" max="4" step="1" value="3" placeholder="GPA this semester" id="currentsemestergpa">
</label>
</li>
</ul>
</div>
<label for="newcumulativegpa">Your New Cumulative GPA:</label>
<output id="newcumulativegpa" for="oldcumulativegpa numberofsemesters currentsemestergpa" name="newcumulativegpa">0</output>
The myJsFunction seemingly calculates the person's GPA given the information provided in the inputs. It makes logical sense, as you take your previous average multiplied over the time you've spent in school, plus your current semester/quarter GPA divided by what will be your total time after this quarter.
The problem, I think, is that you're not actually displaying the result. All you're doing is creating a new tag with the ID of a variable you've declared in your function.
Related
As a learning exercise and to also create a simple, but helpful little tool (for me), I am trying to create a web-based form that will take price and quantity data for multiple items and then produce a "per unit cost" (price divided by item quantity). Based on that info, I then want further calculations to provide a final cost based on the cost totals for several unit costs of those items. I have this simple little tool built in an Excel spreadsheet, but I want it in web format also.
I am into shooting as a hobby and I reload my own ammo. This tool takes the bulk price/quantity for four items; bullets, powder, primers, and brass cases, gives the per unit cost and then will tell me the cost per round of ammo (first iteration is the most expensive as new brass casing costs are included), then subsequent loadings (selectable number) is calculated using only bullet, powder, and primer cost since the brass can be reloaded multiple times.
I have the initial start with the html displaying two lines of user input, first line is: bullet, price, quantity, unit. Second line is Powder, price, quantity, unit. The form input is formatted using css grid.
I have a script that works to do the calculations for the first line for the bullet, but I don't know how to get it to reiterate and then calculate and output the powder data. I've read numerous sites concerning form calculations and most if it went right over my head. Some help with this would be appreciated.
(function () {
function calculateUnitCost(bprice, bquantity) {
bprice = parseFloat(bprice);
bquantity = parseFloat(bquantity);
bcost = (bprice*0.06+bprice)/bquantity;
return bcost.toPrecision(2);
}
var unitCost = document.getElementById("unitCost");
if (unitCost) {
unitCost.onsubmit = function () {
this.bunit.value = calculateUnitCost(this.bprice.value, this.bquantity.value);
return false;
};
}
}());
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css">
<title>Unit Cost Calculator</title>
</head>
<body>
<div class="contain">
<div class="wrapper">
<div class="form">
<h2>Load Cost Calculator</h3>
<form id="unitCost" action="">
<p>
<label for="bullet">Bullet </label>
<input id="bullet" name="bullet" type="text" />
</p>
<p>
<label for="bprice">Price </label>
<input id="bprice" name="bprice" type="number" step="0.01" />
</p>
<p>
<label for="bquantity">Quantity </label>
<input id="bquantity" name="bquantity" type="number" />
</p>
<p>
<label for="bunit">Unit Cost </label>
<input id="bunit" name="bunit" type="number" step="0.01" />
</p>
<p>
<label for="powder">Powder </label>
<input id="powder" name="powder" type="text" />
</p>
<p>
<label for="pprice">Price </label>
<input id="pprice" name="pprice" type="number" step="0.01" />
</p>
<p>
<label for="pquantity">Quantity </label>
<input id="pquantity" name="pquantity" type="number" />
</p>
<p>
<label for="punit">Unit Cost </label>
<input id="punit" name="punit" type="number" step="0.01" />
</p>
<p>
<label for="subm"></label>
<input type="submit" value="Calculate Per Unit Cost" />
</p>
<p>
<label for="rest"></label>
<input type="reset" value="Reset" />
</p>
</form>
</div>
</div>
</div>
Ok, the suggestion by Ayaz does work, sort of. I swear I tried that before and it did not. I even still have the old copy where I tried it, I just went back and it doesn't work, but for some reason editing the current working copy, with the exact same code, it works. Sigh, anyway...I've also figured out the code to get and calculate the powder data and it too works.
The formula for the powder unit cost is different than for bullets. Bullets are sold in quantity counts, 50, 100, etc. Powder is sold by weight, typically in 1lb or 8lb containers. However, for calculating per cartridge loading costs there is a second weight unit used, "grains." There are 7000 grains to 1lb. So, the formula I am trying to use for powder is
(pprice*0.06+pprice)/(pquantity*7000)
The 0.06 is there to add in the cost of sales tax. Quantity is entered by the user in pounds, the formula converts it to grains, or is supposed to. When I use that formula, I get weird results. When I run the script with a powder price of 29.99, quantity of 1, it gives me an output of 32. Something is obviously not calculating correctly.
So, I changed the formula to
(pprice*0.06+pprice)/pquantity
and instead of entering 1 for the quantity, I can put in the total grains instead of pounds (7000 for 1lb of powder or 56000 for 8lbs), which is fine since it will always be one or the other.
I then ran into an issue of result precision. The output was only to 4 decimal places on the powder. I needed that output to go to out as far as possible. Since a single grain of powder is incredibly small in terms of price, it seems immaterial, but will be important later when calculating per cartridge prices and especially when calculating multiples of cartridges, such as 20 rounds per "box." The same is true for primers as they come in boxes of 1000. I then tried adding:
return pcost.toPrecision(8);
but that did not change anything. So after adding more fields for primers and brass and playing around, I found that the code line
return bcost,toPrecision(2);
was the culprit. By removing the ".toPrecision" portion, everything returns out to however many decimals it actually calculates to.
On to the next step, now to have it do more math and output the cost of a single, complete round by adding the unit cost for each item together (and then round it up to 2 decimals). Going to go try working on that now...I'll probably have more questions on this..
Here's the current working code:
(function () {
function calculateUnitCost(bprice, bquantity) {
bprice = parseFloat(bprice);
bquantity = parseFloat(bquantity);
bcost = (bprice*0.06+bprice)/bquantity;
pprice = parseFloat(pprice);
pquantity = parseFloat(pquantity);
pcost = (pprice*0.06+pprice)/pquantity;
prprice = parseFloat(prprice);
prquantity = parseFloat(prquantity);
prcost = (prprice*0.06+prprice)/prquantity;
brprice = parseFloat(brprice);
brquantity = parseFloat(brquantity);
brcost = (brprice*0.06+brprice)/brquantity;
return bcost;
}
var unitCost = document.getElementById("unitCost");
if (unitCost) {
unitCost.onsubmit = function () {
this.bunit.value = calculateUnitCost(this.bprice.value, this.bquantity.value);
this.punit.value = calculateUnitCost(this.pprice.value, this.pquantity.value);
this.prunit.value = calculateUnitCost(this.prprice.value, this.prquantity.value);
this.brunit.value = calculateUnitCost(this.brprice.value, this.brquantity.value);
return false;
};
}
}());
Use the below code if Per Unit calculation formula is same for Powder.
(function () {
function calculateUnitCost(bprice, bquantity) {
bprice = parseFloat(bprice);
bquantity = parseFloat(bquantity);
bcost = (bprice*0.06+bprice)/bquantity;
return bcost.toPrecision(2);
}
var unitCost = document.getElementById("unitCost");
if (unitCost) {
unitCost.onsubmit = function () {
this.bunit.value = calculateUnitCost(this.bprice.value, this.bquantity.value);
this.punit.value = calculateUnitCost(this.pprice.value, this.pquantity.value);
return false;
};
}
}());
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css">
<title>Unit Cost Calculator</title>
</head>
<body>
<div class="contain">
<div class="wrapper">
<div class="form">
<h2>Load Cost Calculator</h3>
<form id="unitCost" action="">
<p>
<label for="bullet">Bullet </label>
<input id="bullet" name="bullet" type="text" />
</p>
<p>
<label for="bprice">Price </label>
<input id="bprice" name="bprice" type="number" step="0.01" />
</p>
<p>
<label for="bquantity">Quantity </label>
<input id="bquantity" name="bquantity" type="number" />
</p>
<p>
<label for="bunit">Unit Cost </label>
<input id="bunit" name="bunit" type="number" step="0.01" />
</p>
<p>
<label for="powder">Powder </label>
<input id="powder" name="powder" type="text" />
</p>
<p>
<label for="pprice">Price </label>
<input id="pprice" name="pprice" type="number" step="0.01" />
</p>
<p>
<label for="pquantity">Quantity </label>
<input id="pquantity" name="pquantity" type="number" />
</p>
<p>
<label for="punit">Unit Cost </label>
<input id="punit" name="punit" type="number" step="0.01" />
</p>
<p>
<label for="subm"></label>
<input type="submit" value="Calculate Per Unit Cost" />
</p>
<p>
<label for="rest"></label>
<input type="reset" value="Reset" />
</p>
</form>
</div>
</div>
</div>
I am relatively new to Javascript (biopython background) and I am trying to add a simple feature to a website.
In essence, I need to accept user input for 4 types of menus (check boxes) and then multiply the sum of the values ($) of selected menus by the number of days and number of people (user inputs using text fields).
Below are HTML and Javascript parts of the code
function multiply() {
var n_ppl = document.getElementsByName('people')[0].value;
var n_days = document.getElementsByName('days')[0].value;
return var out = n_ppl * n_days;
}
function totalIt() {
var n_ppl = document.getElementsByName('people')[0].value;
var n_days = document.getElementsByName('days')[0].value;
var input = document.getElementsByName("product");
var total = 0;
for (var i = 0; i < input.length; i++) {
if (input[i].checked) {
total += parseInt(input[i].value);
}
return var price = total
}
// not sure how can I get - var final = total * out
// after I get it I can finally do - document.getElementsByName("total")[0].value = "$" + final.toFixed(2);
<br> Breakfast <input name="product" value="12" type="checkbox" onclick="totalIt()" /> <br>
<br> First Meal <input name="product" value="20" type="checkbox" onclick="totalIt()" /> <br>
<br> Second Meal <input name="product" value="15" type="checkbox" onclick="totalIt()" /> <br>
<br> Craft Service <input name="product" value="10" type="checkbox" onclick="totalIt()" /> <br>
<br> Number of People <input type="text" name="people"> <br>
<br> Number of Days <input type="text" name="days"> <br>
<br> Total: <input value="$0.00" readonly="readonly" type="text" name="total" />
I apologize to all web developers for my pythonic style in advance.
I should also mention that both functions work perfectly fine separately but even without trying to multiply their outputs (i.e. even if their code is present next to each other), nothing works.
I will be really grateful for your help!
You need only one function to iterate over your inputs.
Do not use inline JavaScript it's sign of bad coding habits, and makes the application hard to debug. Keep your JS in one place and make use of Element.addEventListener()
Use Node.querySelector() and Node.querySelectorAll()
Use name="product[]" syntax when handling similar names. This will be submitted to the backend as an array of values.
You can use Array.prototype.reduce() to reduce (accumulate) all your '[name="product[]"]:checked' chechboxes values to a single integer
Place your <script> code right before the closing </body> tag
const EL_menu = document.querySelector("#menu");
const calcPrice = evt => {
const price = [...EL_menu.querySelectorAll('[name="product[]"]:checked')]
.reduce((n, el) => (n += +el.value, n), 0);
const nPers = +EL_menu.querySelector('[name="people"]').value || 1;
const nDays = +EL_menu.querySelector('[name="days"]').value || 1;
const total = price * nPers * nDays;
EL_menu.querySelector("[name=total]").value = `\$${total.toFixed(2)}`;
}
EL_menu.querySelectorAll("input").forEach(el => el.addEventListener('input', calcPrice));
#menu label { display: block; }
<div id="menu">
<label><input type="checkbox" name="product[]" value="12"> Breakfast</label>
<label><input type="checkbox" name="product[]" value="20"> First Meal</label>
<label><input type="checkbox" name="product[]" value="15"> Second Meal</label>
<label><input type="checkbox" name="product[]" value="10"> Craft Service</label>
<label><input type="number" name="people" value="1" min="1"> Number of People</label>
<label><input type="number" name="days" value="1" min="1"> Number of Days</label><br>
Total: <input type="text" name="total" value="$0.00" readonly="readonly">
</div>
Here is the code I am using at the moment which doesn't seem to output anything, so I am unsure where I am going wrong:
Note: Div "Calc-Tab-3" is hidden to begin with
CODE
function myHoursPumpIsRunFunction() {
var ThisIsMyHoursRun = document.getElementById("slideRangeHours").value;
document.getElementById("myHoursRan").innerHTML = ThisIsMyHoursRun;
}
function GetTheResults() {
var Volts = parseInt(document.getElementById('Volts').value);
var Amps = parseInt(document.getElementById('Amps').value);
var HoursPumpIsRan = parseInt(document.getElementsById('slideInputValueHours').value);
var KwhPerDay = (Volts * Amps) / 1000 * HoursPumpIsRan;
document.getElementById("ResultsKwhPerDay").innerHTML = KwhPerDay;
}
<div class="Container-1">
Volts: <input type="number" class="tabinput" id="Volts" min="1">
Amps: <input type="number" class="tabinput" id="Amps" min="1">
<span>How many hours do you run your pump for: </span>
<span class="slideOutputValueHours" id="myHoursRan">7</span> Hours
<input type="range" class="slideInputValueHours slider" id="slideRangeHours" value="7" min="1" max="24" step="1" oninput="myHoursPumpIsRunFunction()">
<input type="button" class="CalcButtons" onclick="document.getElementById('Container-1').style.display='none';document.getElementById('Calc-Tab-3').style.display='block';GetTheResults()" value="Calculate Results">
<div id="Calc-Tab-3">
Total kWh per day: <span id="ResultsKwhPerDay"></span> KWh per day
</div>
</div>
My second question is, can I still grab the info from those input boxes if the div class"Container-1" has a display of none immediately after the button is clicked?
Yes you can grab the info from those input boxes if the div class "Container-1" has a display of none immediately after the button is clicked.
Your code doesn't work because there are multiple errors in js (You can always check for js errors by using inspect element feature on any browser).
Errors:
document.getElementById('Container-1').style.display='none';
'Container-1' is a class so you can't get it by using getElementById, either use document.getElementsByClassName or change it to 'id' instead of class.
var HoursPumpIsRan = parseInt(document.getElementsById('slideInputValueHours').value);
Same as error 1 'slideInputValueHours' is a class and also function name is 'getElementById' not 'getElementsById'.
Here is working code Link
Javascript:
function myHoursPumpIsRunFunction() {
var ThisIsMyHoursRun = document.getElementById("slideRangeHours").value;
document.getElementById("myHoursRan").innerHTML = ThisIsMyHoursRun;
}
function GetTheResults() {
document.getElementById('Container-1').style.display='none';
document.getElementById('Calc-Tab-3').style.display='block';
var Volts = parseInt(document.getElementById('Volts').value);
var Amps = parseInt(document.getElementById('Amps').value);
var HoursPumpIsRan =
parseInt(document.getElementById('slideRangeHours').value);
var KwhPerDay = (Volts * Amps) / 1000 * HoursPumpIsRan;
document.getElementById("ResultsKwhPerDay").innerHTML = KwhPerDay;
}
HTML:
<div id="Container-1">
Volts: <input type="number" class="tabinput" id="Volts" min="1"> Amps: <input type="number" class="tabinput" id="Amps" min="1">
<span>How many hours do you run your pump for: </span><span class="slideOutputValueHours" id="myHoursRan">7</span> Hours
<input type="range" class="slideInputValueHours slider" id="slideRangeHours" value="7" min="1" max="24" step="1" oninput="myHoursPumpIsRunFunction();">
<input type="button" class="CalcButtons" onclick="GetTheResults();" value="Calculate Results">
</div>
<div id="Calc-Tab-3" style="display:none;">
Total kWh per day: <span id="ResultsKwhPerDay"></span> KWh per day
</div>
You had some errors in your code, some points you were trying to use document.getElementById() but you were passing a class, not an Id. SOme tags you opened but forgot to close, I fixed both errors. (I suggest to start using a debug tool for javascript, like DevTools F12 of your browser, and a HTML validator like this one https://validator.w3.org/)
About your second question, yes, it is possible, an element that is not visible is just not visible, but it still exists.
function myHoursPumpIsRunFunction() {
var ThisIsMyHoursRun = document.getElementById("slideRangeHours").value;
document.getElementById("myHoursRan").innerHTML = ThisIsMyHoursRun;
}
function GetTheResults() {
var Volts = parseInt(document.getElementById('Volts').value);
var Amps = parseInt(document.getElementById('Amps').value);
var HoursPumpIsRan = parseInt(document.getElementById('slideRangeHours').value);
var KwhPerDay = (Volts * Amps) / 1000 * HoursPumpIsRan;
document.getElementById("ResultsKwhPerDay").innerHTML = KwhPerDay;
}
function CalcButtonClick(){
document.getElementById('Container-1').style.display='none';
document.getElementById('Calc-Tab-3').style.display='block';
GetTheResults()
}
<div id="Container-1">
Volts: <input type="number" class="tabinput" id="Volts" min="1">
Amps: <input type="number" class="tabinput" id="Amps" min="1">
<span>How many hours do you run your pump for: </span>
<span class="slideOutputValueHours" id="myHoursRan">7</span> Hours
<input type="range" class="slideInputValueHours slider" id="slideRangeHours" value="7" min="1" max="24" step="1" oninput="myHoursPumpIsRunFunction()">
<input type="button" class="CalcButtons" onclick="CalcButtonClick()" value="Calculate Results">
</div>
<div id="Calc-Tab-3">
Total kWh per day: <span id="ResultsKwhPerDay"></span> KWh per day
</div>
<p>
<label for="hours">Learn JavaScript the Hardy Way’ - Complete e-book (Printed)</label>
<input type="number" min="0" id="chap7" name="hours" value="0">
</p>
<input type="checkbox" id="printed"/>Please tick if you would like a printed version<br />
<p class="post">Postage : <strong>£<output id="post">0</output></strong><p>
I would like a piece of javascript so that upon the checkbox being checked, it makes the postage value 3.50. However, it is 3.50 per copy of the complete ebook. So it would have to check the value of number box and times it by the value inside.
Solution that changes based on checkbox state:
var chap7 = document.getElementById('chap7'),
post = document.getElementById('post'),
printed = document.getElementById('printed');
printed.addEventListener('change', function() {
var quantity = parseInt(chap7.value, 10);
post.value = printed.checked ? quantity * 3.5 : quantity;
}, false);
chap7.addEventListener('change', function() {
post.value = parseInt(this.value, 10);
});
<p>
<label for="hours">Learn JavaScript the Hardy Way’ - Complete e-book (Printed)</label>
<input type="number" min="0" id="chap7" name="hours" value="0">
</p>
<input type="checkbox" id="printed"/>Please tick if you would like a printed version<br />
<p class="post">Postage : <strong>£<output id="post">0</output></strong><p>
Solution that changes based on text input state:
var chap7 = document.getElementById('chap7'),
post = document.getElementById('post');
chap7.addEventListener('change', function(e) {
var quantity = parseInt(chap7.value, 10);
post.value = quantity * 3.5;
}, false);
<p>
<label for="hours">Learn JavaScript the Hardy Way’ - Complete e-book (Printed)</label>
<input type="number" min="0" id="chap7" name="hours" value="0">
</p>
<p class="post">Postage : <strong>£<output id="post">0</output></strong><p>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script>
function baseCalculate(slider,sqft,plumbing,credit){
var cost = document.getElementById("cost");
var slideval = document.getElementById("slideval");
var sqft = document.getElementById("sqft");
var plumbing = document.getElementsByName("plumbing");
var credit = document.getElementsByName("Credit");
var price = slider;
cost.innerHTML = "$"+(((sqft * price) + plumbing) * credit);
slideval.innerHTML = slider;
}
</script>
</head>
<body>
<h2>Job Estimator</h2>
How many square feet?
<input type="text" id="sqft"><br>
Price per Square Foot? <input type="range" min="55" max="80" value="70" step="1
onChange="baseCalculate(this.value,'sqft','plumbing','Credit')" style="width:500px;">
<span id="slideval">70</span>
<p>
<legend>Will there be plumbing?</legend> <label>
<input type="radio" name="plumbing" value="150" id="plumbing_0">
yes</label>
<br>
<label>
<input type="radio" name="plumbing" value="0" id="plumbing_1">
no</label>
<br>
<label>
<input type="radio" name="plumbing" value="-150" id="plumbing_2">
promo</label>
<br>
</p>
<p><legend>Paying with credit card?</legend>
<label>
<input type="radio" name="Credit" value="1.06" id="Credit_0">
Yes</label>
<br>
<label>
<input type="radio" name="Credit" value="1" id="Credit_1">
No</label>
<br>
<label>
<input type="radio" name="Credit" value=".94" id="Credit_2">
Promo</label>
<br>
</p>
<h2>This is the cost of the project: <span id="cost"></span></h2>
</body>
</html>
This is the code I am using. I am trying to get it to multiply the sqft times the price then add on the plumbing and then multiply all that by the credit.
What am I missing here? It returns a NaN.
Thanks for any help provided.
You have to get the text value using textContent and perform a calculation
var cost = document.getElementById("cost").textContent;
var slideval = document.getElementById("slideval").textContent;
var sqft = document.getElementById("sqft").textContent;
and also value for input element
var plumbing = document.getElementsByName("plumbing")[0].value;
var credit = document.getElementsByName("Credit")[0].value;
getElementsByName will return the array and here i took the first value [0]
Your case you need to do a for loop and check for checked attribute and get its value for calculation