|
JavaScript - Shipping Calculator Code Help
The question in the book says:
Many companies normally charge a shipping and handling fee for purchases. Create a Web page that allows a user to enter a purchase price into a text box; include a JavaScript function that calculates shipping and handling. Add functionality to the script that adds a minimum shipping and handling fee of $1.50 for any purchase that is less than or equal to $25.00. For any orders over $25.00, add 10% to the total purchase price for shipping and handling, but do not include the $1.50 minimum shipping and handling fee. The formula for calculating a percentage is price*percent/100. After you determine the total cost of the order (purchase plus shipping and handling), display it in an alert dialog box. This is what I have so far, it comes up with the text box, but when the price is entered it doesn't come back with an answer. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="js_styles.css" type="text/css" />
<title>Calculating Shipping & Handling</title>
<script type="text/javascript">
/* ![CDATA[ */
function getShipping();
{
if (price <= 25.00)
shipping = 1.50
else if(price > 25.00)
shipping = (price * (10/100));
}
/* ]]> */
</script>
</head>
<body>
<script type="text/javascript">
/* ![CDATA[ */
document.write("<h1>Purchase Price with Shipping</h1>");
/* ]]> */
</script>
<script type="text/javascript">
/* <![CDATA[ */
var price=prompt("What is your purchase price?");
getShipping();
document.write ("<p>The purchase price entered is $" + (price) + "</p>");
document.write ("<p>Shipping is $" + (shipping) + "</p>");
var total = price + shipping;
document.write("Your total price with shipping is $ " + (total) + "");
/* ]]> */
</script>
</body>
</html>
Similar TutorialsCode: <script>
// Calculate and display the total cost of the selected cruise
function CostOfCruise(findRounding)
{
//Get the varius elements in the statements and variable
document.getelementbyID ("costCruise" + i); //Assign a value to the radioButton
document.getElementById("returnFare"); //Assign a vlaue to the checkbox
document.getElementById("costSeat" + i); //Assign a value to the second radio button
document.getElementById ("totalCost"); //Assign a value to the total cost of the cruise
document.getElementById("findRounding"); //Assign a rounded value to the total cost
//List the variables involved
var radioButton; // A radio button
var costCruise; //Cost of each cruise
var checkbox; //A checkbox
var returnFare; //The reutrn fare
var radio; //the second set of radio buttons
var costSeat; //Cost of seating choice
var totalCost; //The final cost of the cruise
//Determine the cruise chosen and its cost
//Get the cost of the selected cruise
for (var i = 1; i <= 5; i++)
radioButton = document.getElementById("Costcruise" + i);
// Display the appropriate response
if (radioButton.value === "")
alert("You need to choose one of the islands to visit.");
else (radioButton.checked === true);
//Get the cost of the cruise as a whole number
costCruise *= parseInt(radioButton.value);
//Determine if return fare purchased
// Check if the object is valid before attempting to use it
if (returnFare.value === null)
return;
else (checkbox.checked === true);
checkbox = document.getElementById("returnFare");
//Get the value of the reutrn fare as a whole number
returnFare *= parseInt(checkbox.value);
//Determine which type of seating chosen
if (radio.value === "")
alert("You need to choose your preferred seating arrangements.");
else (radio.checked === true);
radio = document.getElementById("costSeat" + i);
//Get the cost of the seating as a whole number
costSeat *= parseFloat(radio.value);
//Calculate total cost of cruise
totalCost = document.getElementById ("totalCost");
totalCost = ("costCruise" * "returnFare") * "costSeat"; //Total Cost of cruise
//rounds the cost to its nearest integer
findRounding = document.getElementById("findRounding");
findRounding = Math.round("totalCost");
alert ("The total cost of this cruise is $" + findRounding);
}
</script>
<html> body> <h1>Island Hopper Cruises Fare Calculator</h1> <p> Complete the form below to calculate the cost of your cruise.</p> <form> <!--The choices of islands to visit with their assigned values or cost of the trip.--> <p>Route:<br /> <input type="radio" id="cruise1" name="costCruise" value="49"> <label for="cruise1">Main Beach - Azkaban Island</label><br> <input type="radio" id="cruise2" name="costCruise" value="79"> <label for="cruise2">Main Beach - Amity Island</label><br> <input type="radio" id="cruise3" name="costCruise" value="109"> <label for="cruise3">Main Beach - Treasure Island</label><br> <input type="radio" id="cruise4" name="costCruise" value="89"> <label for="cruise4">Main Beach - Gilligan's Island</label><br> <input type="radio" id="cruise5" name="costCruise" value="59"> <label for="cruise5">Main Beach - Skull Island</label><br></p> <!--The decision to purcahse a return fare or not.--> <p> Click here if you will be purchasing a return fa <input type="checkbox" id="returnFare" name="returnFare" value="2"></p> <!--The choice of seating arrangment and their assigned value according to class of seat.--> <p>Seating:<br /> <input type="radio" id="first" name="costSeat" value="2.5"> <label for="first">First class</label><br> <input type="radio" id="busi" name="costSeat" value="1.5"> <label for="busi">Business class</label><br> <input type="radio" id="econ" name="costSeat" value="1"> <label for="econ">Economy class</label><br></p> <!--The total cost of the chosen trip displayed as an alert.--> <input type="button" value="Calculate" onclick="CostOfCruise"> <input type="reset" value="Reset"> </form> </body> </html> Hi All, I need a code for my online blind shop so that customers can get a quote without having to go through the order process. They would need to enter their fabric range, style and width and drop. My first obsticle is where to start learning how to do it! Could anyone please point me in the direction of a good but easy to understand tutorial or advise me on how I can achieve my goal? I've looked all over the internet but cant find what I am looking for. I'm willing to learn and do this myself, otherwise I'll have to pay for someone else to do it for me. Any help would be great! Thanks, Deb. I am having difficulty getting the following assignment to run properly: Many companies charge a shipping and handling charge for purchases. Create a Web page that allows a user to enter a purchase price into a text box and includes a JavaScript function that calculates shipping and handling. Add functionality to the script that adds a minimum shipping and handling charge of $1.50 for any purchase that is less than or equal to $25.00. For any orders over $25.00, add 10% to the total purchase price for shipping and handling, but do not include the $1.50 minmum shipping and handling charge. The formula for calculating a percentage is price * percent / 100. For example, the formula for calculating 10% of a $50.00 purchase price is 50 * 10 / 100, which results in a shipping and handling charge of $5.00. After you determine the total cost of the order (purchase plus shipping and handling), display it in an alert dialog box. Save the document as CalcShipping.html. This is what I have after working on it round and round for 4 hours yesterday: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Calculate Order</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" href="js_styles.css" type="text/css" /> <script type="text/javascript"> /* <![CDATA[ */ function applyShipping(shipping) { if (purchase > 25.00) shipping = purchase * 10 / 100; } /* ]]> */ </script> </head> <body> <script type="text/javascript"> /* ![CDATA[ */ document.write("<h1>Purchase Plus Shipping</h1>"); /* ]]> */ </script> <script type="text/javascript"> /* <![CDATA[ */ var purchase=window.prompt("Please Enter Your purchase amount"); var shipping = 1.50; applyShipping(); document.write ("<p>The price entered was $" + (purchase) + "</p>"); document.write ("<p>Shipping and Handling $" + (shipping) + "</p>"); var totalPrice = purchase + shipping; document.write ("<p>Your total price is $" + (totalPrice) + "</p>"); // window.alert("Your total price is $" + (totalPrice) + );// /* ]]> */ </script> </body> </html> Right now this javascript shopping cart works to 1. charge shipping based on the item, 2. the destination country, 3. it combines shipping for a quantity over 1 of the SAME item. Each item has 2 different possible shipping charges. I am trying to get the javascript to check the shopping cart to see what item in the cart has the highest possible shipping charge, charge that amount to that item, and charge the lowest possible shipping charge on all other items in the cart. If item A is purchased alone shipping is $5.00. If purchased with item B, which costs $10.00 to ship alone, the $10.00 is charged for item B and only $3.00 for item A. Because item B had the higher shipping charge at a quantity of one. I have tried adding various things like me.items[current], item.shipping, me.shipping, this.shipping, shipping_Cost, and other things next to the second && in the part of the script that shows the country. I have also tried adding && if (me.whatever) and && if (item.whatever) and similar things at the beginning of the script next to if (this.country). I have found the parts of the script that pertain to cart items and to updating the shopping cart. Now I am stuck. The javascript is in 2 parts. One part goes in the item page, which I will post first. The second part goes in an external javascript file which I will post at the bottom. In between there is the part that shows the shopping cart. It isn't part of the javascript. Code: <script type="text/javascript" src="simpleCart.js"></script>
<script type="text/javascript">
<!--
simpleCart.checkoutTo = PayPal;
simpleCart.email = "my Paypal email address";
simpleCart.cartHeaders = ["Name" , "Price" , "Quantity" , "remove" ];
CartItem.prototype.shipping=function(){
// we are using a 'country' field to calculate the shipping,
// so we first make sure the item has a country
if(this.country){
if( this.country == 'United States' && this.quantity == '1'){
return this.quantity*5.00;
} else if( this.country == 'United States' && this.quantity >= '2') {
return this.quantity*3.00;
} else if( this.country == 'Belgium' && this.quantity == '1') {
return this.quantity*12.00;
} else if( this.country == 'Belgium' && this.quantity >= '2') {
return this.quantity*9.00;
else {
return this.quantity*0.00;
}
} else {
// use a default of $0.00 per item if there is no 'country' field
return this.quantity*0.00;
}
}
// --></script>
Code: <div style="display:block;"></div> <div>SHOPPING CART</div> <div class="cartHeaders"></div><br><br><br> <div class="simpleCart_items"></div> <div id="totals"> Item Total: <span class="simpleCart_total"></span><br>Shipping Total: <span class="simpleCart_shippingCost"></span><br>Tax: <span class="simpleCart_taxCost"></span><br>Final Total: <span class="simpleCart_finalTotal"></span> </div> <br><br><br><br> <br><br> <a href="javascript:;" class="simpleCart_empty">Empty Shopping Cart</a><br><br> <a href="javascript:;" class="simpleCart_checkout">Checkout Through Paypal</a> </div></div> separate javascript file is here http://simplecartjs.com/documentation.html I am trying to combine shipping across different items in a javascript shopping cart. I can comine shipping based on how many items are in the cart, and characteristics of the item being added. But not both. I need the script to combine shipping based on how many items are in the cart, as well as the item name of the item being added to the cart. I assume I need to check the cart quantity in 1 function, then have it call 1 of 2 other functions based on how many items are in the cart. The 2nd function would charge the shipping based on the item name. I don't know if the code is wrong, and where I should put the 2 additional functions I am adding. It isn't working though. I am adding 2 ways I have tried below. Code: me.shipping = function(){
switch(me.quantity){
case '0':
return 0;
break;
case '1':
return oneItemInCart();
break;
default: otherNumber;
return moreThanOneItemInCart();
break;
}
function oneItemInCart();
{
if(item.name)
{
if(item.name.match = "Cricut Cartridge")
return 4.39
else if(item.name.match = "Glitter")
return 5.00
else
return quantity*0.00;
}
}
function moreThanOneItemInCart();
{
if(item.name)
{
if(item.name.match = "Cricut Cartridge")
return item.quantity*3.00-3.00+4.39
if(item.name.match = "Glitter")
return item.quantity*4.00-4.00+5.00
else
return quantity*0.00;
}
}
Code: me.shipping = function(){
if( parseInt(me.quantity,10)===0 )
return 0;
else if( parseInt(me.quantity,10)===1)
return oneItemInCart();
else if( parseInt(me.quantity,10) > 1)
return moreThanOneItemInCart();
else
return quantity*0.00;
function oneItemInCart();
{
if(item.name)
{
if(item.name.match = "Cricut Cartridge")
return 4.39
else if(item.name.match = "Glitter")
return 5.00
else
return quantity*0.00;
}
}
function moreThanOneItemInCart();
{
if(item.name)
{
if(item.name.match = "Cricut Cartridge")
return item.quantity*3.00-3.00+4.39
if(item.name.match = "Glitter")
return item.quantity*4.00-4.00+5.00
else
return quantity*0.00;
}
}
Here is the original document - the part I edited is the me.shipping part http://simplecartjs.com/ Hello all, I am trying to copy the billing information to be the same as the shipping information when they select the checkbox. Everything seems to work except for the State field which is a drop down. Depending on what country they select, the state field will automatically populate. Does anyone know how I can copy the billing state to be the same as shipping as well? Text file attached. Thanks in advance. Hi, PanM here. Trying to build a website to help my cousin sell his beautiful art. I am using a free web page at weebly.com and they have an option to use either PayPal or Google Checkout to put in shipping costs and go to the cart checkout. However, haven't evaluated Google yet, but PayPal does not do what I want. You have to put in various shipping prices and then it doesn't relate to the state or country unless you select all states, or anyway that's how I see it. I have found one on the net that wants $5 per month, but I am trying to do this for free. UPS, FedEx, and USPS have API's that can probably work, but I would prefer a HTML file or Javascript file in the page on my site. Can anyone help with this problem? Please. Thanks, PanM How could i make a calculator that changes three values when a vertex on an image moves. Example : When a point moves on the triangle it changes the cost quality and time. I have this start and need the meat for the concept to work.<!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> </head> <body> <p><img src="Assets/Project-triangle.svg.png" width="500" height="492" alt=""/>-------------------------------------------<img src="Assets/triangle.gif" width="224" height="210" alt=""/></p> <p> <label for="textfield">Cost :</label> <input type="text" name="textfield" id="textfield"> <label for="textfield2"> Time :</label> <input type="text" name="textfield2" id="textfield2"> <label for="textfield3">Quality :</label> <input type="text" name="textfield3" id="textfield3"> </p> <p> </p> </body> </html> Help would be greatly appreciated! I'm using the following code to calculate an age from the given date of birth however it works for some DOB's, gives wrong answers for some and undefined for others, can someone help me? Code:
<div style="font-size:13px; font-family:Verdana;">
<script>
<!--
/*Darren McGrady */
var current= new Date()
var day = current.getDate()
var month = current.getMonth() + 1
var year = current.getFullYear()
var a = 29
var b = 12
var c = 1980
var age
if (month < b)
age = (year-c)-1
if ((month == b) && (day < a))
age = (year-c)-1
else
age = year-c
document.write(age);
//-->
</script>
</div>
Below is the code for a calculator using script. can one help me to explain me the colored line?? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> </head> <body> </body> <script language="javascript" type="text/javascript"> function multiply() { a=Number Quote: Quote: (document.calculator.number1.value) ; b=Number(document.calculator.number2.value); c=a*b; document.calculator.total.value=c; } function addition(){ a=Number(document.calculator.number1.value); b=Number(document.calculator.number2.value); c=a+b; document.calculator.total.value=c; } function subtraction(){ a=Number(document.calculator.number1.value); b=Number(document.calculator.number2.value); c=a-b; document.calculator.total.value=c; } function division(){ a=Number(document.calculator.number1.value); b=Number(document.calculator.number2.value); c=a/b; document.calculator.total.value=c; } function modulus(){ a=Number(document.calculator.number1.value); b=Number(document.calculator.number2.value); c=a%b; document.calculator.total.value=c; } </script> </head> <body> <form name="calculator"> Number 1: <input type="text" name="number1"> Number 2: <input type="text" name="number2"> Get Result: <input type="text" name="total"> <input type="button" value="ADD" onclick="javascript:addition();"> <input type="button" value="SUB" onclick="javascript:subtraction();"> <input type="button" value="MUL" onclick="javascript:multiply();"> <input type="button" value="DIV" onclick="javascript:division();"> <input type="button" value="MOD" onclick="javascript:modulus();"> </form> </body> </html> Hi all. I'm having a bit of a problem returning a different value each time a different button is pressed for calculator. What am I doing wrong? Code: <script>
function calc(btname){
for(var x=0;x<=11;x++){
if(x==0){
btname="zero";
}else if(x==1){
btname="one";
}else if(x==2){
btname="two";
}else if(x==3){
btname="three";
}else if(x==4){
btname="four";
}else if(x==5){
btname="five";
}else if(x==6){
btname="six";
}else if(x==7){
btname="seven";
}else if(x==8){
btname="eight";
}else if(x==9){
btname="nine";
}else if(x==10){
btname="multiply";
}else if(x==11){
btname="divide";
}
if('document.forms.test.'+btname+'.onClick'){
alert(btname);
}
}
}
function scalc(){
var sign="";
var btname="";
document.write('<form name="test">');
for(var x=0;x<=11;x++){
if(x==0){
btname="zero";
}else if(x==1){
btname="one";
}else if(x==2){
btname="two";
}else if(x==3){
btname="three";
}else if(x==4){
btname="four";
}else if(x==5){
btname="five";
}else if(x==6){
btname="six";
}else if(x==7){
btname="seven";
}else if(x==8){
btname="eight";
}else if(x==9){
btname="nine";
}else if(x==10){
btname="multiply";
sign = "*";
}else if(x==11){
btname="divide";
sign = "/";
}
if(x<10){
document.write('<input type="button" size="30" name="'+btname+'" value="'+x+'" onClick="calc(this);"> ');
}else if(x>9 && x<12){
document.write('<input type="button" size="30" name="'+btname+'" value="'+sign+'" onClick="calc(this);"> ');
}
if(x==2 || x == 5 || x == 8){
document.write('<br>');
}
}
document.write('</form>');
}
scalc();
</script>
ANY help is GREATLY appreciated! Hi , this is my bmi calculator script <HEAD> <script type="text/javascript"> <!-- Begin script of spillo3000 function calculateBMI() { var weight = eval(document.form.weight.value) var height = eval(document.form.height.value) var height2 = height / 100 var BMI = weight / (height2 * height2) if(weight == "" || isNaN(weight) || height2 == "" || isNaN(height2)) { alert("inserisci un valore"); return; } else { document.form.BodyMassIndex.value=custRound(BMI,1); if(BMI < 18.5) { document.getElementById('feedback').innerHTML = 'Underweight '; }else if(BMI >=18.5 && BMI < 29.9) { document.getElementById('feedback').innerHTML = 'Normal '; }else if(BMI > 29.9) { document.getElementById('feedback').innerHTML = 'Overweight '; } } } function custRound(x,places) { return (Math.round(x*Math.pow(10,places)))/Math.pow(10,places) } function resetAll(){ document.getElementById('feedback').innerHTML=""; return true; } // End --> </script> </HEAD> <!-- --> <BODY> <div align="left"> <form name="form" id="form"> <input type="Text" name="weight" size="4"> Peso (Kg)<br> <input type="Text" name="height" size="4"> Altezza (Cm)<br> <input type="Text" name="BodyMassIndex" id="BodyMassIndex" size="4"> BMI<br> <input type="Text" name="feedback" id="feedback" style="padding:10px 0 20px 0; border:none; font-weight:600; color:#555555; font-family:verdana;" ><br> <input type="button" style="font-size: 8pt" value="Calcola" onClick="calculateBMI()" name="button"> <input type="reset" style="font-size: 8pt" value="Reset" onclick="resetAll()" name="button"> </form> </div> <!-- Script Size: I would want to show writing that it says if is in overweight, norms or I underweigh, but the script does not work. could someone help me? please I'm decent at JavaScript but I have no idea how I should go about making a calculator. So far I'll drop a bunch of buttons down that all onclick to a function (a,b) and then it will add or w/e then return. How would I incorporate multiple methods such as subtraction or multiplication though? Basically I'm confident I the ability to code or learn to make this calculator, just have no idea how to set this up, thanks. aaaaaa
So after some studying I have a pretty decent method using objects. I built it so that you hit the first number, then you would hit a plus or minus then the second number. The problem is just getting the buttons to define variables and run functions. Quote: <html> <head> <script type="text/javascript" > x=10; h=1; var numbs = new Const(x) function Const(one){ this.x=one; ADD(this.x) if(h=1){ function ADD(a){ y=5; b=y+a; alert(b); }}} </script> </head> <body> <input type="button" value="1" onclick="needs to run all that AND set x=1 and h=1"> </body> </html> Also I plan on going back and making y, which is the second number you're adding, an object. For now I'm just setting it equal to something so I don't have to mess with it. I'm not sure what the code is to add this to javascript. I don't know if anyone can help me with this? Each numeric button should change the input box up at the top to whatever. When one of the operator buttons (+,-,*,/) is pressed, the value in the input box at the top should change to 0. Before an operator button is pressed, the value should be stored in a variable to keep track of the left-hand side of the equation. After it is pressed, the value should be stored in the right hand side variable. Thanks I need help trying to figure out how to get my bmi calculator to work. I cant figure out what is wrong with my formula part and why it wont calculate the numbers you type in...pls help! <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script type="text/javascript"> function calculateBMI() { var weight = numb(document.data.weight.value) var height = numb(document.data.height.value) var height2 = height2 * height2 var BMI = weight * 703 / (height2 * height2) document.form.BodyMassIndex.value=custRound(BMI,1); } </script> <title></title> <style type="text/css"> div.c2 {text-align: center} input.c1 {font-size: 8pt} </style> </head> <body> <div class="c2"> <form name="form" id="form"><input type="text" name="weight" size="4"> Weight (in Kilos) <input type="text" name="height" size="4"> Height (in Centimeters)<br> <br> <input type="text" name="BodyMassIndex" id="BodyMassIndex" size="4"> BMI <input type="button" class="c1" value="Calculate" onclick="calculateBMI()" name="button"> <input type="reset" class="c1" value="Clear Form"></form> </div> </body> </html> I have been having problems adding checkboxes and option selects in the same function.. Here's what I have. Code: <script type="text/javascript">
function bonuscalc() {
var aaaa = document.getElementById("aaaa").value;
var bbbb = document.getElementById("bbbb").value;
var cccc = document.getElementById("cccc").value;
if (dddd.checked){
var dddd = document.dddd.value = 2;
}
else {
var dddd = document.dddd.value = 1;
}
var eeee = document.getElementById("eeee").value;
var bonus = aaaa* bbbb * dddd * cccc * eeee;
var roundbonus = Math.round(bonus*10)/10;
document.getElementById("roundbonus").value = roundbonus;
}
</script>
Javascript first.. The part I'm not sure about is the if/else part for checbox. Now the html: Code:
<form action="" id="calc1">
<table width="100%">
<tbody>
<tr>
<td>A status: <select id="aaaa">
<option value="1.1">A1</option>
<option value="1.02">A2</option>
<option value="1">A3</option>
<option value="0.95">A4</option>
</select>
</td>
<td>B status: <select id="bbbb">
<option value="1">0%</option>
<option value="0.99">1%</option>
<option value="0.98">2%</option>
<option value="0.97">3%</option>
<option value="0.96">4%</option>
<option value="0.95">5%</option>
<option value="0.94">6%</option>
<option value="0.93">7%</option>
<option value="0.92">8%</option>
<option value="0.91">9%</option>
<option value="0.90">10%</option>
</select>
</td>
<td>E status:<input id="eeee" type="text" />
</td>
<td>D status: <input id="dddd" name="dddd" type="checkbox">
</td>
<td>C status: <select id="cccc">
<option value="1">No</option>
<option value="1.2">Yes</option>
</select>
</td>
</tr>
<tr>
<td width="100%">
<input type="button" value="Submit" onclick="bonuscalc()" />
<br />
Result: <input type="text" readonly="readonly" id="roundbonus" />
</td>
</tr>
</tbody>
</table>
</form>
I hope it's not too confusing. The idea is to assign value 2 if the checkbox is checked and value 1 is it isn't.. |
|||||||