Why is this function not working? (BASIC JAVASCRIPT)

Question

1.00/5 (1 vote)

See more:

I have a calculator to get the order total for a shirt design company. The issue I have is with JQuery and why it won't get and display the value for me.
I need this fixed ASAP (like 10 days ago, NOW)

Here's my code:

JavaScript

<html>
<head>
<title></title>
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<style>
	#wrapper {
		width: 900px;
		margin-left:auto;
		margin-right:auto;
		min-height: 600px;
		height: auto;
	}
	header {
	
	}
	nav {
	
	}
	#left {
		float: left;
		width: 200px;
		min-height: 600px;
		height: auto;
	}
	#content {
	
	}
	#preview {
		width: 350px;
		height: 600px;
		float: left;
		background: url('shirt.jpg') no-repeat;
		background-size: 350px 200px;
	}
	#input {
		width: 350px;
		height: 600px;
		float: left;
		background: #f1f1f1;
	}
	ul {
		list-style-type: none;
	}
	ul li {
		margin-top: 10px;
	}
</style>
<script type="text/javascript">
function calc() {
	var numberOfShirts 		= $("#"+'numberOfShirts'     ).val();
	var numberOfColorsFront = $("#"+'numberOfColorsFront').val();
	var numberOfColorsBack  = $("#"+'numberOfColorsBack' ).val();
	var pricePerColor = 0.00;
	var fee           = 0.00;
	var Total		  = 0.00;
	if(numberOfShirts >= 1 && numberOfShirts <= 35) {//1-35
		if(numberOfColorsFront == 1) {
			fee += 25;
			pricePerColor = 2.50;
		}
		else if(numberOfColorsFront == 2) {
			fee += 45;
			pricePerColor = 3.13;
		}
		else if(numberOfColorsFront == 3) {
			fee += 65;
			pricePerColor = 3.75;
		}
		else if(numberOfColorsFront == 4) {
			fee += 85;
			pricePerColor = 3.75;
		}
		else if(numberOfColorsFront == 5) {
			fee += 105;
			pricePerColor = 3.75;
		}
		else if(numberOfColorsFront == 6) {
			fee += 125;
			pricePerColor = 3.75;
		}
		if(numberOfColorsBack == 1) {
			fee += 25;	
			pricePerColor = 2.50;
		}
		else if(numberOfColorsBack == 2) {
			fee += 45;
			pricePerColor = 3.13;
		}
		else if(numberOfColorsBack == 3) {
			fee += 65;
			pricePerColor = 3.75;
		}
		else if(numberOfColorsBack == 4) {
			fee += 85;
			pricePerColor = 3.75;
		}
		else if(numberOfColorsBack == 5) {
			fee += 105;
			pricePerColor = 3.75;
		}
		else if(numberOfColorsBack == 6) {
			fee += 125;
			pricePerColor = 3.75;
		}
	}
	else if(numberOfShirts >=  36 && numberOfShirts <=  71) {//36-71
		if(numberOfColorsFront == 1) {
			fee += 25;
			pricePerColor = 2.00;
		}
		else if(numberOfColorsFront == 2) {
			fee += 45;
			pricePerColor = 2.50;
		}
		else if(numberOfColorsFront == 3) {
			fee += 65;
			pricePerColor = 3.00;
		}
		else if(numberOfColorsFront == 4) {
			fee += 85;
			pricePerColor = 3.50;
		}
		else if(numberOfColorsFront == 5) {
			fee += 105;
			pricePerColor = 4.00;
		}
		else if(numberOfColorsFront == 6) {
			fee += 125;
			pricePerColor = 5.00;
		}
		if(numberOfColorsBack == 1) {
			fee += 25;	
			pricePerColor = 2.00;
		}
		else if(numberOfColorsBack == 2) {
			fee += 45;
			pricePerColor = 2.50;
		}
		else if(numberOfColorsBack == 3) {
			fee += 65;
			pricePerColor = 3.00;
		}
		else if(numberOfColorsBack == 4) {
			fee += 85;
			pricePerColor = 3.50;
		}
		else if(numberOfColorsBack == 5) {
			fee += 105;
			pricePerColor = 4.00;
		}
		else if(numberOfColorsBack == 6) {
			fee += 125;
			pricePerColor = 5.00;
		}
	}
	else if(numberOfShirts >=  72 && numberOfShirts <= 199) {//72-99
		if(numberOfColorsFront == 1) {
			fee += 25;
			pricePerColor = 1.80;
		}
		else if(numberOfColorsFront == 2) {
			fee += 45;
			pricePerColor = 2.25;
		}
		else if(numberOfColorsFront == 3) {
			fee += 65;
			pricePerColor = 2.70;
		}
		else if(numberOfColorsFront == 4) {
			fee += 85;
			pricePerColor = 3.15;
		}
		else if(numberOfColorsFront == 5) {
			fee += 105;
			pricePerColor = 3.60;
		}
		else if(numberOfColorsFront == 6) {
			fee += 125;
			pricePerColor = 4.05;
		}
		if(numberOfColorsBack == 1) {
			fee += 25;	
			pricePerColor = 1.80;
		}
		else if(numberOfColorsBack == 2) {
			fee += 45;
			pricePerColor = 2.25;
		}
		else if(numberOfColorsBack == 3) {
			fee += 65;
			pricePerColor = 2.70;
		}
		else if(numberOfColorsBack == 4) {
			fee += 85;
			pricePerColor = 3.15;
		}
		else if(numberOfColorsBack == 5) {
			fee += 105;
			pricePerColor = 3.60;
		}
		else if(numberOfColorsBack == 6) {
			fee += 125;
			pricePerColor = 4.05;
		}
	}
	else if(numberOfShirts >= 100 && numberOfShirts <= 199) {//100-199
		if(numberOfColorsFront == 1) {
			fee += 25;
			pricePerColor = 1.60;
		}
		else if(numberOfColorsFront == 2) {
			fee += 45;
			pricePerColor = 2.00;
		}
		else if(numberOfColorsFront == 3) {
			fee += 65;
			pricePerColor = 2.40;
		}
		else if(numberOfColorsFront == 4) {
			fee += 85;
			pricePerColor = 2.80;
		}
		else if(numberOfColorsFront == 5) {
			fee += 105;
			pricePerColor = 3.20;
		}
		else if(numberOfColorsFront == 6) {
			fee += 125;
			pricePerColor = 3.60;
		}
		if(numberOfColorsBack == 1) {
			fee += 25;	
			pricePerColor = 1.60;
		}
		else if(numberOfColorsBack == 2) {
			fee += 45;
			pricePerColor = 2.00;
		}
		else if(numberOfColorsBack == 3) {
			fee += 65;
			pricePerColor = 2.40;
		}
		else if(numberOfColorsBack == 4) {
			fee += 85;
			pricePerColor = 2.80;
		}
		else if(numberOfColorsBack == 5) {
			fee += 105;
			pricePerColor = 3.20;
		}
		else if(numberOfColorsBack == 6) {
			fee += 125;
			pricePerColor = 3.60;
		}
	}
	else if(numberOfShirts >= 200 && numberOfShirts <= 499) {//200-499
		if(numberOfColorsFront == 1) {
			fee += 25;
			pricePerColor = 1.30;
		}
		else if(numberOfColorsFront == 2) {
			fee += 45;
			pricePerColor = 1.63;
		}
		else if(numberOfColorsFront == 3) {
			fee += 65;
			pricePerColor = 1.95;
		}
		else if(numberOfColorsFront == 4) {
			fee += 85;
			pricePerColor = 2.28;
		}
		else if(numberOfColorsFront == 5) {
			fee += 105;
			pricePerColor = 2.61;
		}
		else if(numberOfColorsFront == 6) {
			fee += 125;
			pricePerColor = 2.94;
		}
		if(numberOfColorsBack == 1) {
			fee += 25;	
			pricePerColor = 1.30;
		}
		else if(numberOfColorsBack == 2) {
			fee += 45;
			pricePerColor = 1.63;
		}
		else if(numberOfColorsBack == 3) {
			fee += 65;
			pricePerColor = 1.95;
		}
		else if(numberOfColorsBack == 4) {
			fee += 85;
			pricePerColor = 2.28;
		}
		else if(numberOfColorsBack == 5) {
			fee += 105;
			pricePerColor = 2.61;
		}
		else if(numberOfColorsBack == 6) {
			fee += 125;
			pricePerColor = 2.94;
		}
	}
	else if(numberOfShirts >= 500 && numberOfShirts <= 999) {//500-999
		if(numberOfColorsFront == 1) {
			fee += 25;
			pricePerColor = 1.10;
		}
		else if(numberOfColorsFront == 2) {
			fee += 45;
			pricePerColor = 1.38;
		}
		else if(numberOfColorsFront == 3) {
			fee += 65;
			pricePerColor = 1.63;
		}
		else if(numberOfColorsFront == 4) {
			fee += 85;
			pricePerColor = 1.93;
		}
		else if(numberOfColorsFront == 5) {
			fee += 105;
			pricePerColor = 2.26;
		}
		else if(numberOfColorsFront == 6) {
			fee += 125;
			pricePerColor = 2.56;
		}
		if(numberOfColorsBack == 1) {
			fee += 25;	
			pricePerColor = 1.10;
		}
		else if(numberOfColorsBack == 2) {
			fee += 45;
			pricePerColor = 1.38;
		}
		else if(numberOfColorsBack == 3) {
			fee += 65;
			pricePerColor = 1.63;
		}
		else if(numberOfColorsBack == 4) {
			fee += 85;
			pricePerColor = 1.93;
		}
		else if(numberOfColorsBack == 5) {
			fee += 105;
			pricePerColor = 2.26;
		}
		else if(numberOfColorsBack == 6) {
			fee += 125;
			pricePerColor = 2.56;
		}
	}
	else if(numberOfShirts >= 1000) {//1000+
		if(numberOfColorsFront == 1) {
			fee += 25;
			pricePerColor = 0.90;
		}
		else if(numberOfColorsFront == 2) {
			fee += 45;
			pricePerColor = 1.13;
		}
		else if(numberOfColorsFront == 3) {
			fee += 65;
			pricePerColor = 1.35;
		}
		else if(numberOfColorsFront == 4) {
			fee += 85;
			pricePerColor = 1.58;
		}
		else if(numberOfColorsFront == 5) {
			fee += 105;
			pricePerColor = 1.80;
		}
		else if(numberOfColorsFront == 6) {
			fee += 125;
			pricePerColor = 2.02;
		}
		if(numberOfColorsBack == 1) {
			fee += 25;	
			pricePerColor = 0.90;
		}
		else if(numberOfColorsBack == 2) {
			fee += 45;
			pricePerColor = 1.13;
		}
		else if(numberOfColorsBack == 3) {
			fee += 65;
			pricePerColor = 1.35;
		}
		else if(numberOfColorsBack == 4) {
			fee += 85;
			pricePerColor = 1.58;
		}
		else if(numberOfColorsBack == 5) {
			fee += 105;
			pricePerColor = 1.80;
		}
		else if(numberOfColorsBack == 6) {
			fee += 125;
			pricePerColor = 2.02;
		}
	}
	numberOfShirts * pricePerColor ;
	Total = (numberOfShirts * pricePerColor) + fee;
	Total += Total * .0825;
	alert('Your Total (with tax): '+Total);
}

</script>
</head>
<body>
	<div id="wrapper">
		<header>
		
		</header>
		<nav>
		
		</nav>
		<div id="left">
		
		</div>
		<div id="content">
			<div id="preview">
			
			</div>
			<div id="input">
				<ul>
					<li>
						Choose A Product:
						<select id="productChoice" name='Frontcolors'>
							<option value="0">Gildan 2000</option>
						</select>
					</li>
					<li>
						Base Shirt Color:
						<select id="productChoice" name='Frontcolors'>
							<option value="0">White</option><!--$0 -->
							<option>Black</option><!--$1.50 -->
							<option>Royal</option><!--$1.50 -->
							<option>Navy</option><!--$1.50 -->
							<option>Sports Grey</option><!-- -->
							<option>Red</option><!--$1.50 -->
							<option>Kelley</option><!--$1.00 -->
							<option>Orange</option><!--$1.00 -->
							<option>Khaki</option><!--$1.00 -->
							<option>Other Light</option><!--$1.00 -->
							<option>Other Dark</option><!--$1.50 -->
						</select>
					</li>
					<li>
						Number of Colors on Front?:
						<select id="numberOfColorsFront" name='numberOfColorsFront'>
							<option value="0">0</option>
							<option value="1">1</option>
							<option value="2">2</option>
							<option value="3">3</option>
							<option value="4">4</option>
							<option value="5">5</option>
							<option value="6">6</option>
							<option value="7">7</option>
							<option value="8">8</option>
							<option value="9">9</option>
							<option value="10">10</option>
							<option value="11">11</option>
						</select>
					</li>
					<li>
						Number of Colors on Back?:
						<select id="numberOfColorsBack" name='numberOfColorsBack'>
							<option value="0">0</option>
							<option value="1">1</option>
							<option value="2">2</option>
							<option value="3">3</option>
							<option value="4">4</option>
							<option value="5">5</option>
							<option value="6">6</option>
							<option value="7">7</option>
							<option value="8">8</option>
							<option value="9">9</option>
							<option value="10">10</option>
							<option value="11">11</option>
						</select>
					</li>
					<li>
						<form>
							Number of Shirts: 
							<input type="number" id="numberOfShirts" name="numberOfShirts" min="1" max="5000"/>
							
						</form>
					</li>
					<li>
						<input type="submit" value="Get A Quote" onclick="javascript:calc();"/>
					</li>
				</ul>
			</div>
		</div>
	</div>
</body>
</html>

Posted 22-Nov-14 10:07am

shelby67

Updated 22-Nov-14 10:09am

v2

Add a Solution

Comments

vbmike 22-Nov-14 18:30pm

I just pasted your code into my editor, ran it and an alert popped up with an answer...I am using Chrome browser with Brackets editor. Your code does not go beyond 6 for a choice like your drop down allows however and that results in 0 as an answer but the pop-up still comes up..?

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 22-Nov-14 22:41pm

Check the Developer Tool Console Tab if there are any errors listed. Please correct them.

Maciej Los 23-Nov-14 14:56pm

What a bad design! Too many "elses"!

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

George Jonsson · Answer 1 · 2014-11-22T19:10:00

I changed the variable declaration from

JavaScript

var numberOfShirts 	= $("#"+'numberOfShirts'     ).val();
var numberOfColorsFront = $("#"+'numberOfColorsFront').val();
var numberOfColorsBack  = $("#"+'numberOfColorsBack' ).val();

to

JavaScript

var numberOfShirts = document.getElementById("numberOfShirts").value;
var numberOfColorsFront = document.getElementById("numberOfColorsFront").value;
var numberOfColorsBack  = document.getElementById("numberOfColorsBack").value;

This works good in IE8, but in Chrome the combo boxes doesn't work at all so there you some other issues.

(And for your information. This is your problem and only important to you.
No one on this forum cares if you needed a solution 10 days ago or in a week from now.)

Why is this function not working? (BASIC JAVASCRIPT)

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us