Creating a specific calculator using JavaScript - javascript

So I'm trying to create a calculator that's based on a set of rules.
Now as you can see I did most of what I wanted it to do except one thing which I'll try to explain right now.
1- let's say between value1 is equal to 1 and value2 to is equal to 1500.
The calc will give a 1499 in the deduction category, and 149.9 in price category.
Value2 - Value1 = difference
then
Difference*0.1 = price
Now here where I'm stuck.
I want when ever Value 2 is higher than 1500 rather than the formula being
"Difference*0.1 = price"
it changes to
"Difference*0.2 = price"
and when value2 is higher than 2000 the formula then changes to
"Difference*0.3 = price"
now I used an if statement which worked fine
if (value2 < 1500) {
$('#price').val(diff*0.1);
}
but it doesn't end here.
Lets say
Value1 = 600
and
Value2 = 2100
I want the calc to do the following,
1500 - 600 = 900
900 * 0.1= 90
Then it takes
2000 - 1500 = 500
500*0.2 = 100
Then it takes
2100 - 2000 = 100
100*0.3 = 30
90+100+30 = 220 (the final price)
Hopefully the example explains what I want my calc to do.
I'm sorry if it's confusing I'm more than happy to explain more if someone wants to.
<script>
$(function(){
$('#value1, #value2').keyup(function(){
var value1 = parseFloat($('#value1').val()) || 0;
var value2 = parseFloat($('#value2').val()) || 0;
$('#diff').val(value2 - value1);
var diff = parseFloat($('#diff').val()) || 0;
$('#price').val(diff*0.1);
/*if (value2 < 1500) {
$('#price').val(diff*0.1);
}
if (value2 > 1500){
$('#price').val(diff*10);
}*/
});
});
</script>
<html>
<header>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
</header>
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3 well">
<h4 class="text-center">Live Sum of values using jQuery</h4> <hr/>
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="value1">Value 1</label>
<div class="col-sm-10">
<input type="number" name="value1" id="value1" class="form-control" min="0" placeholder="Enter first value" required min="500" max="5000" />
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="value2">Value 2</label>
<div class="col-sm-10">
<input type="number" name="value2" id="value2" class="form-control" min="0" placeholder="Enter second value" min="500" required />
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="diff">Difference</label>
<div class="col-sm-10">
<input type="number" name="diff" id="diff" class="form-control" readonly />
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="price">Total Price</label>
<div class="col-sm-10">
<div class="col-sm-10">
<input type="number" name="price" id="price" class="form-control" readonly />
</div>
</div>
</form>
</div>
</div>
</div>
</html>


Is this what you're looking for?
function get_price(val1, val2) {
if (val2 > 2000) {
return (val2 - 2000) * .3 + get_price(val1, 2000);
}
if (val2 > 1500) {
return (val2 - 1500) * .2 + get_price(val1, 1500);
}
return (val2 - val1) * .1;
}
get_price(600, 2100) === 220
or maybe this
function get_price(val1, val2) {
if (val2 > 2000) {
return (val2 - 2000) * .3 + 500 * .2 + (1500 - val1) * .1;
}
if (val2 > 1500) {
return (val2 - 1500) * .2 + (1500 - val1) * .1;
}
return (val2 - val1) * .1;
}
or if you hate readability, you could go with this atrocity
var get_price = (v1, v2) => v2>2000?(v2-2000)*.3+500*.2+(1500-v1)*.1:(v2>1500?(v2-1500)*.2+(1500-v1)*.1:(v2-v1)*.1);

Related

get total sum of minutes between 2 fields

im trying to get the total minutes from this 2 fields but i keep getting the 60 minutes results but wont show more even when there is few hours in between.
sample
01:59 04:59 getting result 60 minutes
01:59 04:59 wanted result 299 minutes
$(document).ready(function () {
if ($('#duration').val() === '') {
updateDuration($('#start_time').val(), $('#end_time').val());
}
$('#start_time').on('change keyup', function () {
updateDuration($('#start_time').val(), $('#end_time').val());
});
$('#end_time').on('change keyup', function () {
updateDuration($('#start_time').val(), $('#end_time').val());
});
function updateDuration(startTime, endTime) {
var ms = moment(endTime, ' HH:mm:ss').diff(moment(startTime, 'HH:mm:ss')),
dt = moment.duration(ms),
h = Math.floor(dt.asHours()),
m = moment.utc(ms).format('mm');
$('#duration').val('' + m + ' minutes');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>
<p>
<label for="start_time">Start Time</label>
<br>
<input id="start_time" name="start_time" type="text" value="00:00">
</p>
<p>
<label for="end_time">End Time</label>
<br>
<input id="end_time" name="end_time" type="text" value="15:53">
</p>
<p>
<label for="duration">Duration</label>
<br>
<input id="duration" name="duration" type="text">
</p>

Here's one way to do it without moment. Just convert everything to seconds and subtract. If the endtime is less than the start time, we add 24 hours to the end.
$(document).ready(function() {
$('#start_time, #end_time').on('keyup', function() {
updateDuration($('#start_time').val(), $('#end_time').val());
});
$('#start_time').trigger('keyup')
});
const getSeconds = t => t.split(":").reduce((b, a, i) => b + (+a * (i === 0 ? 60 : 1)),0);
function updateDuration(startTime, endTime) {
let start = getSeconds(startTime),
end = getSeconds(endTime)
if (end < start) end += (24 * 60 )
let result = end - start
let m = Math.floor(result/60), s = Math.floor((result%60))
$('#duration').val(`${m} minutes, ${s} seconds`);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>
<p>
<label for="start_time">Start Time</label>
<br>
<input id="start_time" name="start_time" type="text" value="23:59">
</p>
<p>
<label for="end_time">End Time</label>
<br>
<input id="end_time" name="end_time" type="text" value="15:53">
</p>
<p>
<label for="duration">Duration</label>
<br>
<input id="duration" name="duration" type="text">
</p>

If statement with multiple logical operator not working

<script>
function calculateAmount(val) {
var quantity = val;
if (quantity <= 100 && quantity < 1000){
var divobj = document.getElementById('discount');
divobj.value = 4;
var divobj1 = document.getElementById('yousaved');
var yousaved = 0.4 * quantity;
divobj1.value = yousaved;
}
}
</script>
<form>
<div class="form-group">
<label for=“quantity”>:</label>
<input type="quantity" class="form-control" id="quantity" aria-describedby="quantityHelp" placeholder="100 to 1000000" onchange="calculateAmount(this.value)" required>
<small id="quantityHelp" class="form-text text-muted">Any amount between 100 to 1000000.</small>
</div>
<div class="form-group">
<label for=“discount”>discount in %:</label>
<input type="discount" readonly class="form-control" id="discount" placeholder="Interest">
</div>
<div class="form-group">
<label for=“yousaved”>Total saving:</label>
<input type="yousaved" readonly class="form-control" id="yousaved" placeholder="Your Savings">
</div>
</form>
</div>
if (quantity <= 100 && quantity < 1000) condition not working, the only value accepted and get calculated is 100, and even var addition and multiplication is not working eg: quantity - quantity * 4/100

Based on text from your HTML (Number between 100 and 1000), the script should be:
<script>
function calculateAmount(val) {
var quantity = val;
if (quantity >= 100 && quantity <= 1000){
var divobj = document.getElementById('discount');
divobj.value = 4;
var divobj1 = document.getElementById('yousaved');
var yousaved = 0.4 * quantity;
divobj1.value = yousaved;
}
}
</script>

Yup, just a typo.
Probably better to just delete this question Arunkumar.
function calculateAmount(val) {
var quantity = val;
if (quantity >= 100 && quantity < 1000) {
var divobj = document.getElementById('discount');
divobj.value = 4;
var divobj1 = document.getElementById('yousaved');
var yousaved = 0.4 * quantity;
divobj1.value = yousaved;
}
}
<form>
<div class="form-group">
<label for=“quantity”>:</label>
<input type="quantity" class="form-control" id="quantity" aria-describedby="quantityHelp" placeholder="100 to 1000000" onchange="calculateAmount(this.value)" required>
<small id="quantityHelp" class="form-text text-muted">Any amount between 100 to 1000000.</small>
</div>
<div class="form-group">
<label for=“discount”>discount in %:</label>
<input type="discount" readonly class="form-control" id="discount" placeholder="Interest">
</div>
<div class="form-group">
<label for=“yousaved”>Total saving:</label>
<input type="yousaved" readonly class="form-control" id="yousaved" placeholder="Your Savings">
</div>
</form>

Javascript percentage calculation for each form field

I'm trying to work out the percentage value for each field in a form. However my current code is only working out the value for the first field or whichever one is focused.
I'd like it so that the percentage value only for the filed in the same fieldset
The current code works but i'd like to apply to to multiple fieldsets without them interfering with other inputs on the same page
In the snippet you can see that the two separate amounts which are editing each others details
function percentageCal() {
var $price = $(".form-item--invamt .form-item__input").on("input", calculatePerc),
$percentage = $(".form-item__input-expand .percentage").on("input", calculatePrice),
$currency = $(".form-item__input-expand .currency").on("focus", removePercent),
$none = $(".form-item--charges .no-charge").on("focus", removePercent),
$increase = $(".wrapper-types__percentage-value"),
$increaseWrap = $(".wrapper-types__percentage");
$($percentage).add($currency).keypress(function(event) {
if (event.which != 8 && event.which != 0 && (event.which < 48 || event.which > 57)) {
return false;
}
});
function calculatePrice() {
var percentage = parseFloat($(this).val());
var price = parseFloat($price.val());
var calcPrice = parseFloat((price * percentage / 100).toFixed(2));
var newPrice = price + calcPrice;
$increase.text(newPrice);
$increaseWrap.fadeIn();
if (isNaN(newPrice)) {
$increaseWrap.hide();
}
}
function calculatePerc() {
var percentage = $percentage.val();
var price = parseFloat($(this).val());
var calcPerc = parseFloat((price * percentage / 100).toFixed(2));
var newPrice = price + calcPerc;
$increase.text(newPrice);
}
function removePercent() {
$increaseWrap.fadeOut();
}
}
percentageCal();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="wrapper-types__investment">
<legend class="sr-only">Investment 1</legend>
<div class="form-item form-item--required form-item--invamt">
<label class="form-item__label" for="wrappers[0]">Investment amount</label>
<div class="form-item__input-labelled">
<span class="form-item__input-label">£</span>
<input class="form-item__input " type="number" name="wrappers[0]" id="wrappers[0]" min="0" value="15000" required>
</div>
</div>
<div class="form-item form-item--charges-wrap">
<span class="form-item__label">Charges</span>
<div class="form-item form-item--charges">
<label class="form-item__input-label-expand" for="percentage1">%</label>
<div class="form-item__input-expand">
<input class="form-item__input percentage" type="number" name="percentage" id="percentage1">
</div>
</div>
</div>
<div class="form-item form-item--charges-wrap">
<span class="wrapper-types__percentage">= £<span class="wrapper-types__percentage-value"></span></span>
</div>
<div class="form-item form-item--action-btns">
</div>
</fieldset>
<fieldset class="wrapper-types__investment">
<legend class="sr-only">Investment 2</legend>
<div class="form-item form-item--required form-item--invamt">
<label class="form-item__label" for="wrappers[1]">Investment amount</label>
<div class="form-item__input-labelled">
<span class="form-item__input-label">£</span>
<input class="form-item__input " type="number" name="wrappers[1]" id="wrappers[1]" min="0" value="13005.02" required>
</div>
</div>
<div class="form-item form-item--charges-wrap">
<span class="form-item__label">Charges</span>
<div class="form-item form-item--charges">
<label class="form-item__input-label-expand" for="percentage2">%</label>
<div class="form-item__input-expand">
<input class="form-item__input percentage" type="number" name="percentage" id="percentage2">
</div>
</div>
</div>
<div class="form-item form-item--charges-wrap">
<span class="wrapper-types__percentage">= £<span class="wrapper-types__percentage-value"></span></span>
</div>
<div class="form-item form-item--action-btns">
</div>
</fieldset>

Instead of IDs, use classes and DOM traversal functions to find the fields in the same fieldset.
function percentageCal() {
var $price = $(".form-item--invamt .form-item__input").on("input", calculatePerc),
$percentage = $(".form-item__input-expand .percentage").on("input", calculatePrice),
$currency = $(".form-item__input-expand .currency").on("focus", removePercent),
$none = $(".form-item--charges .no-charge").on("focus", removePercent),
$increase = $(".wrapper-types__percentage-value"),
$increaseWrap = $(".wrapper-types__percentage");
$percentage.add($currency).keypress(function(event) {
if (event.which != 8 && event.which != 0 && (event.which < 48 || event.which > 57)) {
return false;
}
});
function calculatePrice() {
var $fieldset = $(this).closest("fieldset");
var percentage = parseFloat($(this).val());
var price = parseFloat($fieldset.find(".form-item--invamt .form-item__input").val());
var calcPrice = parseFloat((price * percentage / 100).toFixed(2));
var newPrice = price + calcPrice;
$fieldset.find(".wrapper-types__percentage-value").text(newPrice);
$fieldset.find(".wrapper-types__percentage").fadeIn();
if (isNaN(newPrice)) {
$fieldset.find(".wrapper-types__percentage").hide();
}
}
function calculatePerc() {
var $fieldset = $(this).closest("fieldset");
var percentage = $fieldset.find(".form-item__input-expand .percentage").val();
var price = parseFloat($(this).val());
var calcPerc = parseFloat((price * percentage / 100).toFixed(2));
var newPrice = price + calcPerc;
$fieldset.find(".wrapper-types__percentage-value").text(newPrice);
}
function removePercent() {
var $fieldset = $(this).closest("fieldset");
$fieldset.find(".wrapper-types__percentage").fadeOut();
}
}
percentageCal();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="wrapper-types__investment">
<div class="form-item--invamt">
<div>
<span class="form-item__input-label">£</span>
<input class="form-item__input " type="number" name="wrappers[0]" id="wrappers[0]" min="0" value="15000" required>
</div>
</div>
<div class="form-item--charges-wrap">
<div class="form-item--charges">
<label class="form-item__input-label-expand" for="percentage">%</label>
<div class="form-item__input-expand">
<input class="form-item__input percentage" type="number" name="percentage" id="percentage">
</div>
</div>
</div>
<div class="form-item--charges-wrap">
<span class="wrapper-types__percentage">= £<span class="wrapper-types__percentage-value"></span></span>
</div>
</fieldset>
<fieldset class="wrapper-types__investment">
<div class="form-item--invamt">
<div>
<span class="form-item__input-label">£</span>
<input class="form-item__input " type="number" name="wrappers[1]" id="wrappers[1]" min="0" value="15000" required>
</div>
</div>
<div class="form-item--charges-wrap">
<div class="form-item--charges">
<label class="form-item__input-label-expand" for="percentage1">%</label>
<div class="form-item__input-expand">
<input class="form-item__input percentage" type="number" name="percentage" id="percentage1">
</div>
</div>
</div>
<div class="form-item--charges-wrap">
<span class="wrapper-types__percentage">= £<span class="wrapper-types__percentage-value"></span></span>
</div>
</fieldset>

Doing math with Time using js

I have the following code:
HTML:
<form onsubmit="return false;">
<div class="col-5">
<label>
Page Time
<input id="pageTime" name="pageTime" type="time" step="1" tabindex="9">
</label>
</div>
<div class="col-5">
<label>
Ack Time
<input id="ackTime" name="ackTime" type="time" step="1" tabindex="10">
</label>
</div>
<div class="col-5">
<label>
Arrival Time
<input id="arrivalTime" name="arrivalTime" type="time" step="1" tabindex="11">
</label>
</div>
<div class="col-5">
<label>
Start Replace / Root Cause Found
<input id="startReplace" name="startReplace" type="time" step="1" tabindex="12">
</label>
</div>
<div class="col-5">
<label>
Replaced / Repair Completed
<input id="replaced" name="replaced" type="time" step="1" tabindex="13">
</label>
</div>
<div class="col-4">
<label>
Engagement
<input type="text" id="engagement" name="engagement" value="" readonly="readonly" />
</label>
</div>
<div class="col-4">
<label>
Arrival
<input type="text" id="arrival" name="arrival" value="" readonly="readonly" />
</label>
</div>
<div class="col-4">
<label>
Investigation
<input type="text" id="investigation" name="investigation" value="" readonly="readonly" />
</label>
</div>
<div class="col-4">
<label>
Mitigate
<input type="text" id="mitigate" name="mitigate" value="" readonly="readonly" />
</label>
</div>
<div class="col-1" style="text-align: center">
<label>
Total Ops Phases
<input type="text" name="totalOpsPhases" id="totalOpsPhases" value="" readonly="readonly" />
</label>
</div>
<div class="col-submit">
<button class="submitbtn" tabindex="14" onclick="opsTime();">Do the Math</button>
</div>
</form>
JS:
function toSeconds(time_str) {
// Extract hours, minutes and seconds
var parts = time_str.split(':');
var sum = 0;
// compute and return total seconds
for (c = 0; c <= 2; c++) {
if (c === 0) {
sum += parts[0] * 3600;
} else if (c === 1) {
sum += parts[1] * 60;
} else if (c === 2) {
if (parts[2] !== 'undefined') {
sum += parts[2];
}
}
}
return sum;
}
function opsTime() {
var time = [document.getElementById('pageTime').value, document.getElementById('ackTime').value, document.getElementById('arrivalTime').value, document.getElementById('startReplace').value, document.getElementById('replaced').value];
// Created an array to easily do the math :)
// Array mapping:
// 0 = pageTime
// 1 = ackTime
// 2 = arrivalTime
// 3 = startReplaceTime
// 4 = replacedTime
for (i = 0; i <= 4; i++) {
if (i === 4) {
var start = time[0];
var end = time[4];
} else {
start = time[i];
end = time[i + 1];
}
var startSec = toSeconds(start);
var endSec = toSeconds(end);
var difference = Math.abs(endSec - startSec);
// format time differnece
var result = [
Math.floor(difference / 3600), // an hour has 3600 seconds
Math.floor((difference % 3600) / 60), // a minute has 60 seconds
difference % 60
];
// 0 padding and concatation
result = result.map(function (v) {
return v < 10 ? '0' + v : v;
}).join(':');
var res = [];
res[i] = result;
}
document.getElementById('engagement').value = res[0];
document.getElementById('arrival').value = res[1];
document.getElementById('investigation').value = res[2];
document.getElementById('mitigate').value = res[3];
document.getElementById('totalOpsPhase').value = res[4];
}
What I'm trying to do is to pick the times filled in the inputs and show the difference in the inputs boxes below.
Engagement should be the time difference between Page Time and Ack Time;
Arrival should be the time difference between Ack Time and Arrival Time;
Investigation should be the time difference between Arrival and Start Replace Time;
Mitigate should be the time difference between Start Replace and Replaced time;
Total Ops Phases should be the time difference between Replaced and Page time.
I'm stuck on the code above for almost 8 hours, changed a lot of things trying to do the math and put each time difference inside an array and then use it to fill the inputs, but it seems the array isn't get filled with data.
Unfortunately I have to use the seconds as well, and I couldn't find much material with different solutions to calculate the difference of times using it.
I will be glad if someone can see another way to solve this matter.
Thanks in advance!
PS: Tried to insert a print of the form but I don't have the reputation needed.

The type="time" attribute is only supported by chrome, not Firefox or Internet Explorer so you should be using a compatibility library like these or one of your own making. If you just want to use chrome you can use valueAsNumber:
v.valueAsNumber
56013000
v.valueAsDate
Thu Jan 01 1970 10:33:33 GMT-0500 (EST)
v.value
"15:33:33"
Note that the Chrome console will show you these options with auto suggest.
Also jsfiddle

Broken Javascript function

I tried to make a grade predictor and I had previous trouble with it. I tried to add another variable and upon deleting it, my program no longer works. When you click the button at the bottom it doesn't do anything.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<div id="radial-center">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<LINK REL="stylesheet" TYPE="text/css" HREF="stylesheet.css">
<title>Grade Predictor</title>
<script type="text/javascript" src="scripts/indexHTMLscript.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
function notEmpty()
{
var grade1 = $('#g1').val().trim();
var weight1 = $('#w1').val().trim();
var grade2 = $('#g2').val().trim();
var weight2 = $('#w2').val().trim();
var grade3 = $('#g3').val().trim();
var weight3 = $('#w3').val().trim();
var grade4 = $('#g4').val().trim();
var weight4 = $('#w4').val().trim();
var grade5 = $('#g5').val().trim();
var weight5 = $('#w5').val().trim();
var grade6 = $('#g6').val().trim();
var weight6 = $('#w6').val().trim();
var grade7 = $('#g7').val().trim();
var weight7 = $('#w7').val().trim();
var grade8 = $('#g8').val().trim();
var weight8 = $('#w8').val().trim();
var grade9 = $('#g9').val().trim();
var weight9 = $('#w9').val().trim();
var grade10 = $('#g10').val().trim();
var weight10 = $('#w10').val().trim();
var grade11 = $('#g11').val().trim();
var weight11 = $('#w11').val().trim();
var grade12 = $('#g12').val().trim();
var weight12 = $('#w12').val().trim();
var grade13 = $('#g13').val().trim();
var weight13 = $('#w13').val().trim();
var grade14 = $('#g14').val().trim();
var weight14 = $('#w14').val().trim();
var grade15 = $('#g15').val().trim();
var weight15 = $('#w15').val().trim();
var grade16 = $('#g16').val().trim();
var weight16 = $('#w16').val().trim();
var grade17 = $('#g17').val().trim();
var weight17 = $('#w17').val().trim();
var grade18 = $('#g18').val().trim();
var weight18 = $('#w18').val().trim();
var grade19 = $('#g19').val().trim();
var weight19 = $('#w19').val().trim();
var grade20 = $('#g20').val().trim();
var weight20 = $('#w20').val().trim();
var total = 0;
var count = 0;
if (grade1.length > 0 && weight1.length > 0)
{
total += (grade1 * weight1);
count += parseInt(weight1);
}
if (grade2.length > 0 && weight2.length > 0)
{
total += (grade2 * weight2);
count += parseInt(weight2);
}
if (grade3.length > 0 && weight3.length > 0)
{
total += (grade3 * weight3);
count += parseInt(weight3);
}
if (grade4.length > 0 && weight4.length > 0)
{
total += (grade4 * weight4);
count += parseInt(weight4);
}
if (grade5.length > 0 && weight5.length > 0)
{
total += (grade5 * weight5);
count += parseInt(weight5);
}
if (grade6.length > 0 && weight6.length > 0)
{
total += (grade6 * weight6);
count += parseInt(weight6);
}
if (grade7.length > 0 && weight7.length > 0)
{
total += (grade7 * weight7);
count += parseInt(weight7);
}
if (grade8.length > 0 && weight8.length > 0)
{
total += (grade8 * weight8);
count += parseInt(weight8);
}
if (grade9.length > 0 && weight9.length > 0)
{
total += (grade9 * weight9);
count += parseInt(weight9);
}
if (grade10.length > 0 && weight10.length > 0)
{
total += (grade10 * weight10);
count += parseInt(weight10);
}
if (grade11.length > 0 && weight11.length > 0)
{
total += (grade11 * weight11);
count += parseInt(weight11);
}
if (grade12.length > 0 && weight12.length > 0)
{
total += (grade12 * weight12);
count += parseInt(weight12);
}
if (grade13.length > 0 && weight13.length > 0)
{
total += (grade13 * weight13);
count += parseInt(weight13);
}
if (grade14.length > 0 && weight14.length > 0)
{
total += (grade14 * weight14);
count += parseInt(weight14);
}
if (grade15.length > 0 && weight15.length > 0)
{
total += (grade15 * weight15);
count += parseInt(weight15);
}
if (grade16.length > 0 && weight16.length > 0)
{
total += (grade16 * weight16);
count += parseInt(weight16);
}
if (grade17.length > 0 && weight17.length > 0)
{
total += (grade17 * weight17);
count += parseInt(weight17);
}
if (grade18.length > 0 && weight18.length > 0)
{
total += (grade18 * weight18);
count += parseInt(weight18);
}
if (grade19.length > 0 && weight19.length > 0)
{
total += (grade19 * weight19);
count += parseInt(weight19);
}
if (grade20.length > 0 && weight20.length > 0)
{
total += (grade20 * weight20);
count += parseInt(weight20);
}
var grandTotal = Math.round(total / count);
alert (grandTotal);
}
</script>
</head>
<body>
<h1 align="center">Grade Predictor</h1>
<p align="center">Enter 4, 3, 2, 1, or 0 into "Grade" slots. Enter 5, 4, 3 ,2, or 1 into "Weight" slots.</p>
<hr>
<div align="center">
<label for="g1"></label>Grade:<input type="number" id="g1" name="grade1">
<label for="w1"></label>Weight:<input type="number" id="w1" name="weight1">
<label id="t1"></label>
</div>
<div align="center">
<label for="g2">Grade:</label><input type="number" id="g2" name="grade2">
<label for="w2">Weight:</label><input type="number" id="w2" name="weight2">
<label id="t2"></label>
</div>
<div align="center">
<label for="g3">Grade:</label><input type="number" id="g3" name="grade3">
<label for="w3">Weight:</label><input type="number" id="w3" name="weight3">
<label id="t3"></label>
</div>
<div align="center">
<label for="g4">Grade:</label><input type="number" id="g4" name="grade4">
<label for="w4">Weight:</label><input type="number" id="w4" name="weight4">
<label id="t4"></label>
</div>
<div align="center">
<label for="g5">Grade:</label><input type="number" id="g5" name="grade5">
<label for="w5">Weight:</label><input type="number" id="w5" name="weight5">
<label id="t5"></label>
</div>
<div align="center">
<label for="g6">Grade:</label><input type="number" id="g6" name="grade6">
<label for="w6">Weight:</label><input type="number" id="w6" name="weight6">
<label id="t6"></label>
</div>
<div align="center">
<label for="g7">Grade:</label><input type="number" id="g7" name="grade7">
<label for="w7">Weight:</label><input type="number" id="w7" name="weight7">
<label id="t7"></label>
</div>
<div align="center">
<label for="g8">Grade:</label><input type="number" id="g8" name="grade8">
<label for="w8">Weight:</label><input type="number" id="w8" name="weight8">
<label id="t8"></label>
</div>
<div align="center">
<label for="g9">Grade:</label><input type="number" id="g9" name="grade9">
<label for="w9">Weight:</label><input type="number" id="w9" name="weight9">
<label id="t9"></label>
</div>
<div align="center">
<label for="g10">Grade:</label><input type="number" id="g10" name="grade10">
<label for="w10">Weight:</label><input type="number" id="w10" name="weight10">
<label id="t10"></label>
</div>
<div align="center">
<label for="g11">Grade:</label><input type="number" id="g11" name="grade11">
<label for="w11">Weight:</label><input type="number" id="w11" name="weight11">
<label id="t11"></label>
</div>
<div align="center">
<label for="g12">Grade:</label><input type="number" id="g12" name="grade12">
<label for="w12">Weight:</label><input type="number" id="w12" name="weight12">
<label id="t12"></label>
</div>
<div align="center">
<label for="g13">Grade:</label><input type="number" id="g13" name="grade13">
<label for="w13">Weight:</label><input type="number" id="w13" name="weight13">
<label id="t13"></label>
</div>
<div align="center">
<label for="g14">Grade:</label><input type="number" id="g14" name="grade14">
<label for="w14">Weight:</label><input type="number" id="w14" name="weight14">
<label id="t14"></label>
</div>
<div align="center">
<label for="g15">Grade:</label><input type="number" id="g15" name="grade15">
<label for="w15">Weight:</label><input type="number" id="w15" name="weight15">
<label id="t15"></label>
</div>
<div align="center">
<label for="g16">Grade:</label><input type="number" id="g16" name="grade16">
<label for="w16">Weight:</label><input type="number" id="w16" name="weight16">
<label id="t16"></label>
</div>
<div align="center">
<label for="g17">Grade:</label><input type="number" id="g17" name="grade17">
<label for="w17">Weight:</label><input type="number" id="w17" name="weight17">
<label id="t17"></label>
</div>
<div align="center">
<label for="g18">Grade:</label><input type="number" id="g18" name="grade18">
<label for="w18">Weight:</label><input type="number" id="w18" name="weight18">
<label id="t18"></label>
</div>
<div align="center">
<label for="g19">Grade:</label><input type="number" id="g19" name="grade19">
<label for="w19">Weight:</label><input type="number" id="w19" name="weight19">
<label id="t19"></label>
</div>
<div align="center">
<label for="g20">Grade:</label><input type="number" id="g20" name="grade20">
<label for="w20">Weight:</label><input type="number" id="w20" name="weight20">
<label id="t20"></label>
</div>
<div>
<p align="center">
<input type='button' onclick='notEmpty()' value='Calculate Grades'/>
</p>
</div>
</body>
</html>
</div>
I do not want help streamlining it to use less code, I just want to know what to do to fix it and make it output correctly.

There is no problem in the code.
The link for the JQuery file (from Google CDN) is incorrect.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
It should be (Note the http:// or https:// based on your website needs)
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"

Categories

Resources