JavaScript - Percentage Calculator With Percentage Bar ? ?

I am trying to create a function or have this work some how where it displays the first number when you make your choice in the first drop down box, which is working so far. In the second drop down box, if any of the answers are chosen except for none, it will take off 10% of the first number. Then add or subtract from there. I just have a problem with creating a function to take off that 10%. Here is the javascript:

Code:

/*
This source is shared under the terms of LGPL 3
www.gnu.org/licenses/lgpl.html

You are free to use the code in Commercial or non-commercial projects
*/

 //Set up an associative array
 //The keys represent the size of the cake
 //The values represent the cost of the cake i.e A 10" cake cost's $35
 var practice_field = new Array();
practice_field["None"]=0;
practice_field["Allergy and Immunology"]=4400;
practice_field["Endocrinology"]=4400;
practice_field["Pathology"]=4400;
practice_field["Dermatology"]=4400;
practice_field["Geriatrics"]=4400;
practice_field["Physical Rehabilitation"]=4400;
practice_field["Family Practice"]=6900;
practice_field["General Practice"]=6900;
practice_field["Internal Medicine"]=6900;
practice_field["Oncology"]=6900;
practice_field["Oral Surgery"]=6900;
practice_field["Radiology"]=6900;
practice_field["Gastroenterology"]=6900;
practice_field["Infectious Disease"]=6900;
practice_field["Nephrology"]=6900;
practice_field["Ophthalmology"]=6900;
practice_field["Pediatrics"]=6900;
practice_field["Urology"]=6900;
practice_field["Anesthesiology"]=9000;
practice_field["Cosmetic Surgery"]=9000;
practice_field["General Surgery"]=9000;
practice_field["Neurology"]=9000;
practice_field["Otolaryngology"]=9000;
practice_field["Plastic Surgery"]=9000;
practice_field["Vascular Surgery"]=9000;
practice_field["Cardiology"]=9000;
practice_field["Emergency Medicine"]=9000;
practice_field["Gynecology"]=9000;
practice_field["Orthopedic Surgery"]=9000;
practice_field["Pain Management"]=9000;
practice_field["Pulmonary Surgery"]=9000;
practice_field["Neurological Surgery"]=9900;
practice_field["Obstetrics"]=9900;

 
 //Set up an associative array 
 //The keys represent the filling type
 //The value represents the cost of the filling i.e. Lemon filling is $5,Dobash filling is $9
 //We use this this array when the user selects a filling from the form
 var society_member= new Array();
 society_member["None"]=1;
society_member["BCMA"]=0.10;
society_member["DCMA"]=0.10;
society_member["FOGS"]=0.10;
society_member["FNS"]=0.10;
society_member["PBCMS"]=0.10;
society_member["FSPS"]=0.10;
 
//This function finds the filling price based on the 
//drop down selection
function getPracticeField()
{
    var docPracticeField=0;
    //Get a reference to the form id="cakeform"
    var theForm = document.forms["cakeform"];
    //Get a reference to the select id="filling"
     var selectedPracticeField = theForm.elements["practice"];
     
    //set cakeFilling Price equal to value user chose
    //For example filling_prices["Lemon".value] would be equal to 5
    docPracticeField = practice_field[selectedPracticeField.value];

    //finally we return cakeFillingPrice
    return docPracticeField;
}	 
	 


//This function finds the filling price based on the 
//drop down selection
function getSelectedSociety()
{
    var docSelectedSociety=0;
    //Get a reference to the form id="cakeform"
    var theForm = document.forms["cakeform"];
    //Get a reference to the select id="filling"
     var selectedSociety = theForm.elements["society"];
     
    //set cakeFilling Price equal to value user chose
    //For example filling_prices["Lemon".value] would be equal to 5
    docSelectedSociety = society_member[selectedSociety.value];

    //finally we return cakeFillingPrice
    return docSelectedSociety;
}

//candlesPrice() finds the candles price based on a check box selection
function candlesPrice()
{
    var candlePrice=0;
    //Get a reference to the form id="cakeform"
    var theForm = document.forms["cakeform"];
    //Get a reference to the checkbox id="includecandles"
    var includeCandles = theForm.elements["includecandles"];

    //If they checked the box set candlePrice to 5
    if(includeCandles.checked==true)
    {
        candlePrice=5;
    }
    //finally we return the candlePrice
    return candlePrice;
}

function insciptionPrice()
{
    //This local variable will be used to decide whether or not to charge for the inscription
    //If the user checked the box this value will be 20
    //otherwise it will remain at 0
    var inscriptionPrice=0;
    //Get a refernce to the form id="cakeform"
    var theForm = document.forms["cakeform"];
    //Get a reference to the checkbox id="includeinscription"
    var includeInscription = theForm.elements["includeinscription"];
    //If they checked the box set inscriptionPrice to 20
    if(includeInscription.checked==true){
        inscriptionPrice=20;
    }
    //finally we return the inscriptionPrice
    return inscriptionPrice;
}
        
function calculateTotal()
{
    //Here we get the total price by calling our function
    //Each function returns a number so by calling them we add the values they return together
    var cakePrice = getPracticeField() * getSelectedSociety() + candlesPrice() + insciptionPrice();
    
    //display the result
    var divobj = document.getElementById('totalPrice');
    divobj.style.display='block';
    divobj.innerHTML = "Total Price For the Cake $"+cakePrice;

}

function hideTotal()
{
    var divobj = document.getElementById('totalPrice');
    divobj.style.display='none';
}

Hi. Can someone please tell me if a bent percentage silder is possible (something like this http://www.codingforums.com/showthread.php?t=173255 only I want it to be bent about 330 degrees, and I wouldn't want to link to another class-I would like to host the entire code on my website)? Also, the reason I want the slider to be bent, is because I would like the slider to be a sort of bent rectangle, and when the user clicks/drags the slider, the rectangle would "fill" to that point (change its background color up to where the mouse is). Thank you. Bye.

Hi,

I am fairly new to this so please bare with me.

I have a php page that uses Javascript (I think) to calculate the percentage Insurance Premium Tax (IPT field) of a total.

I have located where the calculation occurs and can see that it take the total of a predefined amount and divides it by 21 to give me the 5% IPT tax. IPT has risen in the UK today to 6% so I need to know what I need to change the 21 to to give me an accurate IPT calculation.

Here's a snippet of the code. Can anyone help please? Is it 17.65?

PHP Code:
////////////////////////////////////////////
// Motor Bike Calculations
////////////////////////////////////////////
$p = 3;
$q = 0;
  while ($p < 6){
  $base_array = mysql_fetch_row($result4);
  // Motor Bikes
  $risk_code = 2;
  $ap = (0 + ($p));

          $ipt_rate = $ipt_main;

  $monthly_total = $pricing_row[$ap];
  // Calculate IPT
  $ipt_percentage = $monthly_total / 21;
  $monthly_ipt = $ipt_percentage;

    $base_cost = $base_array[0] + $dealer_loading;
  $base_final = $base_cost;
  
  $profit = $monthly_total - $base_cost - $monthly_ipt;
  
        $monthly_total = number_format($monthly_total, 2, '.', '');
            $monthly_ipt = number_format($monthly_ipt, 2, '.', '');
                $base_final = number_format($base_final, 2, '.', '');
                    $profit = number_format($profit, 2, '.', '');
                    
  echo '
  <tr align="center" bgcolor="#FFDDFF"> 
    <td>';
if ($p == 3)
{
echo ('');
}
elseif ($p == 4)
{
echo ('UK');
}
elseif ($p == 5)
{
echo ('UK & European');
}
echo '</td>
    <td>
        <input name="';
if ($p == 3)
{
echo ('comprehensive_plus_'.$risk_code);
}
elseif ($p == 4)
{
echo ('comprehensive_'.$risk_code);
}
elseif ($p == 5)
{
echo ('driveline_plus_'.$risk_code);
}


echo '" type="text" value="'.$pricing_row[$ap].'" size="6" maxlength="6" class="smallinfo">
     </td>
    <td>'.$monthly_ipt.'</td>
    <td>'.$base_final.'</td>
    <td>'.$profit.'</td>
  </tr>';
  $q++;
$p++;
} 

I am trying to customize this scrollbar so that it will fit all screen resolutions and I was wondering how I could do this by somehow customizing the JavaScript files created by Nathan Faubion or if I could do this using other JavaScript variables (var widthPercentage) to change the pixels to percentages? Please let me know what you think. Thank you very much!

One of the pages on the website I'm using the JavaScript on: http://www.clintshipley.com/about.html

Code:

JavaScript file jsScroller.js:
//Created by Nathan Faubion http://www.n-son.com/scripts/jsScrolling/
function jsScroller (o, w, h) {
	var self = this;
	var list = o.getElementsByTagName("div");
	for (var i = 0; i < list.length; i++) {
		if (list[i].className.indexOf("scroller-content") > -1) {
			o = list[i];
		}
	}
	
	//Private methods
	this._setPos = function (x, y) {
		if (x < this.viewableWidth - this.totalWidth) 
			x = this.viewableWidth - this.totalWidth;
		if (x > 0) x = 0;
		if (y < this.viewableHeight - this.totalHeight) 
			y = this.viewableHeight - this.totalHeight;
		if (y > 0) y = 0;
		this._x = x;
		this._y = y;
		with (o.style) {
			left = this._x +"px";
			top  = this._y +"px";
		}
	};
	
	//Public Methods
	this.reset = function () {
		this.content = o;
		this.totalHeight = o.offsetHeight;
		this.totalWidth	 = o.offsetWidth;
		this._x = 0;
		this._y = 0;
		with (o.style) {
			left = "0px";
			top  = "0px";
		}
	};
	this.scrollBy = function (x, y) {
		this._setPos(this._x + x, this._y + y);
	};
	this.scrollTo = function (x, y) {
		this._setPos(-x, -y);
	};
	this.stopScroll = function () {
		if (this.scrollTimer) window.clearInterval(this.scrollTimer);
	};
	this.startScroll = function (x, y) {
		this.stopScroll();
		this.scrollTimer = window.setInterval(
			function(){ self.scrollBy(x, y); }, 40
		);
	};
	this.swapContent = function (c, w, h) {
		o = c;
		var list = o.getElementsByTagName("div");
		for (var i = 0; i < list.length; i++) {
			if (list[i].className.indexOf("scroller-content") > -1) {
				o = list[i];
			}
		}
		if (w) this.viewableWidth  = w;
		if (h) this.viewableHeight = h;
		this.reset();
	};
	
	//variables
	this.content = o;
	this.viewableWidth  = w;
	this.viewableHeight = h;
	this.totalWidth	 = o.offsetWidth;
	this.totalHeight = o.offsetHeight;
	this.scrollTimer = null;
	this.reset();
};

JavaScript on HTML page:
<script type="text/javascript" src="Scripts/jsScroller.js"></script>
<script type="text/javascript" src="Scripts/jsScrollbar.js"></script>
<script type="text/javascript">
var scroller  = null;
var scrollbar = null;
window.onload = function () {
  scroller  = new jsScroller(document.getElementById("scroller"), 550, 275);
  scrollbar = new jsScrollbar (document.getElementById("scrollbar-content"), scroller, false);
}
</script>

How can i "prompt the user for the sales tax rate as a percentage"?
Thanks soooo much for any help!

this is what i have so far....

var tax = prompt("What is your tax rate percentage?", "")
document.write("Return Value: "+tax,("<br />"));

Hi. Sort of new to Javascript.

I am implementing a zoom in feature, but actually tricking the user as a full screen image is simply being stretched.

I plan to apply it to several pages, and don't really fancy working out the pixels for each.

I believe that if you simply put width: 150% height 150% it will change the image size relative to the browser. I don't want that, I want it relative to the original image size. Could I do sort of height*1.5 or something? How would I write that if so? Thanks!

Code:

<script>

$('#in').click(function() {
  $('#drag img').animate({
    width: '150%',
	height: '150%',
  }, 5000, function() {
    // Animation complete.
  });
}); 
</script>

I am having issues with my code... below are the instructions.

"prompt the user for the cost of a purchase and the sales tax rate as a percentage. Calculate the tax amount and the total cost. Display all 4 values in the document"

I am having some real issues with the tax rate percentage, it keeps showing as a decimal, and does not calculate correctly. Any help is highly appreciated. Thanks so much!




var cost = prompt("What is the cost of your purchase?", "")
document.write("Return Value: "+cost,("<br />"));

var tax = prompt("What is your tax rate percentage?", "")
document.write("Return Value: "+tax,("<br />"));

var salestax= cost * tax
document.write("Return Value: "+salestax,("<br />"));

var total = eval(cost) + salestax
document.write(total, ("<br />"));

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>

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>&nbsp;</p>
</body>
</html>



Help would be 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

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);">&nbsp;');
}else if(x>9 && x<12){
document.write('<input type="button" size="30" name="'+btname+'" value="'+sign+'" onClick="calc(this);">&nbsp;');
}
if(x==2 || x == 5 || x == 8){
document.write('<br>');
}
}
document.write('</form>');
}
scalc();
</script>

ANY help is 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>

I am working on an Mpg calculator and I am stuck any input would be greatly appreciated.

Code:

   
  <!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>Gas Mileage</title>
            <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

           <script type = "text/javascript">
              /*<![CDATA[*/
              function calcMPG() 
          { 
             var startMiles= document.forms[0].startingMileage.value;
             var endMiles= document.forms[0].endingMileage.value;
             var gallons=document.forms[0].gallons.value;

             if(isNaN(startMiles)
               isNaN(endMiles))
               isNaN(gallons))
          {
               window.alert("You must enter a number");
              }
                else
             {
              if (gallons > 0)
               {
                 
              document.forms[0].gallons.value= ((endMiles-startMiles)/gallons).toFixed(1);
       }
     }
   }

             /*]]>*/
            </script>
      </head>

      <body>

           <script type = "text/javascript">
              /*<![CDATA[*/
              
            document.write("<p><h1>Miles Per Gallon Calculator</h2></p>");
            document.write("<p><h3>You must enter your starting and ending mileage and gallons used.</h3></p>");
            /*]]>*/
            </script>
              
           <form action="">
           
           <p> Starting Mileage<br />
               <input type="text" name="startingMileage" value="0" onchange="calcMPG()" /> </p>
           <p> Ending Mileage <br />
              <input type="text" name="endingMileage" value="0" onchange="calcMPG()" /></p>

           <p>Gallons Used<br />
              <input type="text" name="gallons" value="0" onchange="calcMPG()"/></p>
           <p>Miles Per Gallon<br />
              <input type="text" name="miles per gallon" value="0" /></p>

           </form>

            

        </body>

        </html>

I have a mistake when it is suppose to calculate. Thanks to all

Hi all master and expert coders

I am working on a calculator which using the instructor's codes from the school. The problem that I having right now is the operator. I have successfully complete only the addition, but could not manage on subtraction and the rest operator. I hope experienced codes would help me out on this. Below is my codes.

<!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>
<script type="text/javascript">
function calculate() {
var value1 = parseInt(validate(document.getElementById("value1").value));
var value2 = parseInt(validate(document.getElementById("value2").value));
radioButtonCheck();
checkboxCheck();
dropDownListCheck();
document.getElementById("result").value = addition(value1, value2);
document.getElementById("result").value = subtraction(value1, value2);
document.getElementById("result").value = multiplication(value1, value2);
document.getElementById("result").value = division(value1, value2);
}

function validate(value) {
if (value == null || value == "") {
alert("Required Field");
return 0;
} else if (isNaN(value)) {
alert("Must be a number");
return 0;
}
else return value;
}

function addition(value1, value2){
return value1 + value2;
}
// trying to use the same addition return statement but fail.
function radioButtonCheck() {
if ((document.getElementById("radio1").checked == false)
&& (document.getElemtById("radio2").checked == false)) {
alert("Please select a radio button");
valid = false;
}
}
function checkboxCheck() {
if ((document.getElementById("cbox1").checked == false)
&& (document.getElementById("cbox2").checked == false)) {
alert("Please select a checkbox");
valid = false;
}
}
function dropDownListCheck() {
if ((document.getElementById("ddlOperator").selectedIndex == 0)) {
alert("Please select a operator");
valid = false;
}
}

</script>

<title>Calculator By Alsus</title>
</head>
<body>
<h2>Calculator</h2>
<table border = "1">
<tr>
<td>Value 1:</td>
<td><input type="text" id="value1" name="value1" /></td>
</tr>
<tr>
<td>Value 2:</td>
<td><input type="text" id="value2" name="value2" /></td>
</tr>
<tr>
<td>Operator:</td>
<td><input type="text" id="Operator" name="Operator" /></td>
</tr>
<tr>
<td><input type="radio" id="radio1" name="radio1" value="radio1" />Radio1<br /></td>
<td><input type="radio" id="radio2" name="radio2" value="radio2" />Radio2<br /></td>
</tr>
<tr>
<td><input type="checkbox" id="cbox1" name="cbox1" value="cbox1" />Checkbox 1<br /></td>
<td><input type="checkbox" id="cbox2" name="cbox2" value="cbox2" />Checkbox 2<br /></td>
</tr>
<tr>
<td>
<select id="ddlSelect">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Result:</td>
<td><input type="text" id="result" name="result" /></td>
</tr>
</table>
<input type="submit" id="btn_sub" name="btn_sub" value="Submit" onclick="calculate()" />
<input type="reset" id="btn_res" name="btn_res" value="Reset" />
</body>
</html>

already solved