If statement with multiple logical operator not working - javascript

<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>

Related

How to total product / service cost radio button checkboxes and text input fields using jquery

I've created a form with a dynamically generated radio button group, 2 checkboxes and 3 text input fields and I'm having a hard time finding a solution to how to total up these fields using JQuery. I either get nothing, NaN or two or more values to concatenate. I've tried more examples I've found on the internet than I can count. Could someone please tell me what I'm doing wrong?
Html
<div id="campaignPackageList" class="campaign-package-list form-group">
<input class="form-check-input" id="campaign_package" name="campaign_package" type="radio" data-packageid="1" data-package="business_dominators_pkg" value="23988" required="">
</div>
<div id="creativeNeeds" class="form-group">
<label class="required">What are the client's creative needs?</label>
<div class="form-check">
<input class="form-check-input" id="creative_image_set" name="creative_image_set" type="checkbox" value="300.00">
<label class="form-check-label" for="creative_image_set">Creative: 5 Image Ad Set Designed by Landmarks - $300.00</label>
</div>
<div class="form-check">
<input class="form-check-input" id="microsite_landingpage" name="microsite_landingpage" type="checkbox" value="800.00">
<label class="form-check-label" for="microsite_landingpage">Micro Site/Landing Page Designed by Landmarks - $800.00</label>
</div>
</div>
<div class="form-group w-25">
<label class="required" for="setup_fee">Setup Fee (Per Individual Campaign)</label>
<input class="form-control" id="setup_fee" name="setup_fee" type="number" value="300.00" readonly="">
</div>
<div id="depositAmountDiv" class="form-group w-25">
<label class="required" for="deposit_amount">Deposit Amount</label>
<input class="form-control " id="deposit_amount" name="deposit_amount" type="number" value="" required="">
</div>
<div id="monthlyImpressionCostDiv" class="form-group w-25">
<label class="required" for="monthly_impressions_cost">Monthly Impression Cost</label>
<input class="form-control " id="monthly_impressions_cost" name="monthly_impressions_cost" type="number" value="" required="">
</div>
<div class="form-group mb-3 w-25">
<label>Campaign Total Amount</label>
<div id="campaign_total_amount"><span>300</span></div>
</div>
JavaScript
let totalPrice = 0;
let packagePrice = 0;
let creativeImageSetPrice = 0;
let micrositeLandingPagePrice = 0;
let setupFee = 0;
let depositAmount = 0;
let monthlyImpressionCost = 0;
$('#campaignPackageList').on('click', 'input[name=campaign_package]', function() {
if ($(this).is(':checked')) {
packagePrice = parseFloat($(this).val());
}
});
console.log(packagePrice);
let $creativeNeedsDiv = $('#creativeNeeds');
$creativeNeedsDiv.on('change', 'input[name=creative_image_set]', function() {
if ($(this).val()) {
creativeImageSetPrice = parseFloat($(this).val());
}
});
$creativeNeedsDiv.on('change', 'input[name=microsite_landingpage]', function() {
if ($(this).val()) {
micrositeLandingPagePrice = parseFloat($(this).val());
}
});
setupFee = parseFloat($('#setup_fee').val());
$('#depositAmountDiv').on('change', 'input[name=deposit_amount]', function() {
if ($(this).val()) {
depositAmount = parseFloat($(this).val());
}
});
$('#monthlyImpressionCostDiv').on('change', 'input[name=monthly_impression_cost]', function() {
if ($(this).val()) {
monthlyImpressionCost = parseFloat($(this).val());
}
});
totalPrice = packagePrice +
creativeImageSetPrice +
micrositeLandingPagePrice +
setupFee +
depositAmount +
monthlyImpressionCost;
$('#campaign_total_amount span').text(totalPrice);
For numeric inputs, I used the input event instead of the change event.
$('#monthlyImpressionCostDiv').on('input', 'input[name=monthly_impressions_cost]', function() {
if ($(this).val().length > 0) {
monthlyImpressionCost = parseFloat($(this).val());
}
else
monthlyImpressionCost = 0;
cal();
});
And I put a value calculation function that is called with every change
function cal()
{
totalPrice = packagePrice + creativeImageSetPrice +
micrositeLandingPagePrice + setupFee + depositAmount +
monthlyImpressionCost;
$('#campaign_total_amount span').text(totalPrice);
}
Full code
let totalPrice = 0;
let packagePrice = 0;
let creativeImageSetPrice = 0;
let micrositeLandingPagePrice = 0;
let setupFee = 0;
let depositAmount = 0;
let monthlyImpressionCost = 0;
$('#campaignPackageList').on('click', 'input[name=campaign_package]', function() {
if ($(this).is(':checked')) {
packagePrice = parseFloat($(this).val());
}
else
packagePrice = 0;
cal();
});
//console.log(packagePrice);
let $creativeNeedsDiv = $('#creativeNeeds');
$creativeNeedsDiv.on('change', 'input[name=creative_image_set]', function() {
if ($(this).is(':checked')) {
creativeImageSetPrice = parseFloat($(this).val());
}
else
creativeImageSetPrice = 0;
cal();
});
$creativeNeedsDiv.on('change', 'input[name=microsite_landingpage]', function() {
if ($(this).is(':checked')) {
micrositeLandingPagePrice = parseFloat($(this).val());
}
else
micrositeLandingPagePrice = 0;
cal();
});
setupFee = parseFloat($('#setup_fee').val());
$('#depositAmountDiv').on('input', 'input[name=deposit_amount]', function() {
if ($(this).val().length > 0) {
depositAmount = parseFloat($(this).val());
}
else
depositAmount = 0;
cal();
});
$('#monthlyImpressionCostDiv').on('input', 'input[name=monthly_impressions_cost]', function() {
if ($(this).val().length > 0) {
monthlyImpressionCost = parseFloat($(this).val());
}
else
monthlyImpressionCost = 0;
cal();
});
function cal()
{
totalPrice = packagePrice +
creativeImageSetPrice +
micrositeLandingPagePrice +
setupFee +
depositAmount +
monthlyImpressionCost;
$('#campaign_total_amount span').text(totalPrice);
}
<div id="campaignPackageList" class="campaign-package-list form-group">
<input class="form-check-input" id="campaign_package" name="campaign_package" type="radio" data-packageid="1" data-package="business_dominators_pkg" value="23988" required="">campaign package
<input class="form-check-input" id="campaign_package" name="campaign_package" type="radio" data-packageid="1" data-package="business_dominators_pkg" value="0" required="">no campaign package
</div>
<div id="creativeNeeds" class="form-group">
<label class="required">What are the client's creative needs?</label>
<div class="form-check">
<input class="form-check-input" id="creative_image_set" name="creative_image_set" type="checkbox" value="300.00">
<label class="form-check-label" for="creative_image_set">Creative: 5 Image Ad Set Designed by Landmarks - $300.00</label>
</div>
<div class="form-check">
<input class="form-check-input" id="microsite_landingpage" name="microsite_landingpage" type="checkbox" value="800.00">
<label class="form-check-label" for="microsite_landingpage">Micro Site/Landing Page Designed by Landmarks - $800.00</label>
</div>
</div>
<div class="form-group w-25">
<label class="required" for="setup_fee">Setup Fee (Per Individual Campaign)</label>
<input class="form-control" id="setup_fee" name="setup_fee" type="number" value="300.00" readonly="">
</div>
<div id="depositAmountDiv" class="form-group w-25">
<label class="required" for="deposit_amount">Deposit Amount</label>
<input class="form-control " id="deposit_amount" name="deposit_amount" type="number" value="" required="">
</div>
<div id="monthlyImpressionCostDiv" class="form-group w-25">
<label class="required" for="monthly_impressions_cost">Monthly Impression Cost</label>
<input class="form-control " id="monthly_impressions_cost" name="monthly_impressions_cost" type="number" value="" required="">
</div>
<div class="form-group mb-3 w-25">
<label>Campaign Total Amount</label>
<div id="campaign_total_amount"><span style="font-size:14px;color:green;">300</span></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Creating a specific calculator using 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);

why my calculations are not correct

I have an HTML form and a Javascript but this Javascript performs an incorrect calculation
function hitung(){
var e = (document.getElementById("ifin").value);
var panjang = parseFloat (document.getElementById("ipanjang").value);
var tinggi = parseFloat (document.getElementById("itinggi").value);
var ht = 2.0;
var hf = 0.0;
var total = 0.0;
if (e == "hpl") {
hf = 0.0;
}
else if (e == "cat") {
hf = 0.5;
}
else {
hf = 0.0;
}
total = panjang*tinggi*ht+hf;
document.getElementById("ototal").innerHTML =
"Harga Total : Rp." + total.toFixed(2) + "0.000,00" + "<br>Sudah termasuk ongkir";
<select name="ifin" id="ifin" class="form-control input-lg" required >
<option selected disabled >Select Finishing</option>
<option value="hpl">HPL</option>
<option value="cat">Cat Duco</option>
</select>
<br>
<h3 align="center"> Masukkan Ukuran </h3>
<div class="form-group row">
<div class="col-xs-6" align="center">
<input class="form-control" type="number" placeholder="Panjang" min="1" id="ipanjang" >
</div>
<div class="col-xs-6">
<input class="form-control" type="number" placeholder="Tinggi" min="1" id="itinggi">
</div>
</div>
The result is not what I wanted, the hf does not count, which counts only panjang*tinggi*hf
I believe something wrong with your
var e = document.getElementById("ifin").value;
Try exclude the bracket.
You must select the select tag first then extract the valid option
var e = document.getElementById("ifin")
var rm = e.options[e.selectedIndex].value
if(rm == "hpl") {//do stuff}
function hitung(){
var e = (document.getElementById("ifin").value);
var panjang = parseFloat (document.getElementById("ipanjang").value);
var tinggi = parseFloat (document.getElementById("itinggi").value);
var ht = 2.0;
var hf = 0.0;
var total = 0.0;
if (e == "hpl") {
//hf = 0.0;
hf = 1.0;//I wanted 3rd value to make sure it works
}
else if (e == "cat") {
hf = 0.5;
}
else {
hf = 0.0;
}
document.getElementById("hf").innerHTML = "HF = " + hf;
total = panjang*tinggi*ht+hf;
document.getElementById("ototal").innerHTML =
"Harga Total : Rp." + total.toFixed(2) + "0.000,00" + "<br>Sudah termasuk ongkir";
}
<select name="ifin" id="ifin" class="form-control input-lg" required >
<option selected disabled >Select Finishing</option>
<option value="hpl">HPL</option>
<option value="cat">Cat Duco</option>
</select>
<br>
<h3 align="center"> Masukkan Ukuran </h3>
<div class="form-group row">
<div class="col-xs-6" align="center">
<input class="form-control" type="number" placeholder="Panjang" min="1" id="ipanjang" >
</div>
<div class="col-xs-6">
<input class="form-control" type="number" placeholder="Tinggi" min="1" id="itinggi">
</div>
</div>
<button onclick="hitung()">Calculate</button>
<h2 id="ototal"></h2>
<h2 id="hf"></h2>
Your code looks fine for me, I added a button calculate that will output the value along with hf, run the snippet and choose the values and press calculate, you'll see the value.
did you try change the value of hf? it says that the value of hf is floating point value or zero values. change that to non-negative value then try it again

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>

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