calculator help in javascript

riffy · Apr 16, 2001

Hi,

I need to create an energy cost calculator for a client site. The user inputs the hours/day he uses a lamp, the days/wk the lamp is used and the cost per kilowatt hour of the lamp.
I've made those three drop down menus. However, to calculate the annual cost, there is no formula, just a number of values that I've been given. For example, if the user inputs 4 hours/day, 5 days/wk and $.06/kwh, then the calculation should equal 0.06. It just takes the value of the previous 3 and gives a number.
I'm thinking that I should set up an array with all the values and then call the array in the annual cost field.

Is that the correct way to do it or is there an easier way?

Thanks

jaredn · Apr 16, 2001

It sounds like you have the right idea. Just use an array. jared@eae.net -

http://webfx.eae.net

riffy · Apr 16, 2001

another question:

will i have to set up a function that actually figures out what number to output based on what the user has selected?
if not, how do i call the array?
sorry if this sounds basic but i haven't had experience with this before..
or if you can tell me somewhere from where i can get help that will also be appreciated

thanks

jaredn · Apr 16, 2001

you can access an arrays attributes like so:

arr = new Array("first element",2,"some other element&quot

el = arr[0]

el now contains "first element"

you can access the selected value of a dropdown like so:

oSelectBox.options[oSelectBox.selectedIndex].value jared@eae.net -

http://webfx.eae.net

riffy · Apr 17, 2001

Hi again,

Ok so I can't get this to work. I tried the array way and I can't seem to find out how to call the array in the text box where the calculation needs to get done.
I'm pasting my code, please let me know what's wrong and how it can be fixed.

<script language="javascript">
<!-- hide javascript

//var costValues = [.06, .08, .09, .08, .09, .10, .09, .10, .12, .10, .11, .13, .11, .13, .15, .12, .15, .17, .15, .17, .20, .17, .20, .23, .19, .22, .26, .21, .25, .29, .19, .22, .26, .22, .26, .31, .25, .30, .35, .28, .34, .39, .31, .37, .44]

function calculateCost() {
if ((!document.en_cost.hrs_day.options[document.en_cost.hrs_day.selectedIndex].value) || (!document.en_cost.days_wk.options[document.en_cost.days_wk.selectedIndex].value) || (!document.en_cost.ckwh.options[document.en_cost.ckwh.selectedIndex].value))
{
alert("Please Fill in ALL boxes!&quot

// alert(document.en_cost.ckwh.options[document.en_cost.ckwh.selectedIndex].value);
}
else {
if (document.en_cost.hrs_day.options[document.en_cost.hrs_day.selectedIndex].value == 4) {
if (document.en_cost.days_wk.options[document.en_cost.days_wk.selectedIndex].value == 5) {
switch (document.en_cost.ckwh.options[document.en_cost.ckwh.selectedIndex].value) {
case ".06" :
document.en_cost.ann_cost.value = .06;
break;
case ".07" :
document.en_cost.ann_cost.value = .08;
break;
case ".08" :
document.en_cost.ann_cost.value = .09;
break;
case ".09" :
document.en_cost.ann_cost.value = .10;
break;
case ".10" :
document.en_cost.ann_cost.value = .11;
break;
}
}
else if (document.en_cost.days_wk.options[document.en_cost.days_wk.selectedIndex].value == 6) {
switch (document.en_cost.ckwh.options[document.en_cost.ckwh.selectedIndex].value) {
case ".06" :
document.en_cost.ann_cost.value = .08;
break;
case ".07" :
document.en_cost.ann_cost.value = .09;
break;
case ".08" :
document.en_cost.ann_cost.value = .10;
break;
case ".09" :
document.en_cost.ann_cost.value = .11;
break;
case ".10" :
document.en_cost.ann_cost.value = .13;
break;
}
}
else {
switch (document.en_cost.ckwh.options[document.en_cost.ckwh.selectedIndex].value) {
case ".06" :
document.en_cost.ann_cost.value = .09;
break;
case ".07" :
document.en_cost.ann_cost.value = .10;
break;
case ".08" :
document.en_cost.ann_cost.value = .12;
break;
case ".09" :
document.en_cost.ann_cost.value = .13;
break;
case ".10" :
document.en_cost.ann_cost.value = .15;
break;
}
}
}
else if (document.en_cost.hrs_day.options[document.en_cost.hrs_day.selectedIndex].value == 8) {
if (document.en_cost.days_wk.options[document.en_cost.days_wk.selectedIndex].value==5) {
switch (document.en_cost.ckwh.options[document.en_cost.ckwh.selectedIndex].value) {
case ".06" :
document.en_cost.ann_cost.value = .12;
break;
case ".07" :
document.en_cost.ann_cost.value = .15;
break;
case ".08" :
document.en_cost.ann_cost.value = .17;
break;
case ".09" :
document.en_cost.ann_cost.value = .19;
break;
case ".10" :
document.en_cost.ann_cost.value = .21;
break;
}
}
else if (document.en_cost.days_wk.options[document.en_cost.days_wk.selectedIndex].value == 6) {
switch (document.en_cost.ckwh.options[document.en_cost.ckwh.selectedIndex].value) {
case ".06" :
document.en_cost.ann_cost.value = .15;
break;
case ".07" :
document.en_cost.ann_cost.value = .17;
break;
case ".08" :
document.en_cost.ann_cost.value = .20;
break;
case ".09" :
document.en_cost.ann_cost.value = .22;
break;
case ".10" :
document.en_cost.ann_cost.value = .25;
break;
}
}
else {
switch (document.en_cost.ckwh.options[document.en_cost.ckwh.selectedIndex].value) {
case ".06" :
document.en_cost.ann_cost.value = .17;
break;
case ".07" :
document.en_cost.ann_cost.value = .20;
break;
case ".08" :
document.en_cost.ann_cost.value = .23;
break;
case ".09" :
document.en_cost.ann_cost.value = .26;
break;
case ".10" :
document.en_cost.ann_cost.value = .29;
break;
}
}
}
else {
if (document.en_cost.days_wk.options[document.en_cost.days_wk.selectedIndex].value == 5) {
switch (document.en_cost.ckwh.options[document.en_cost.ckwh.selectedIndex].value) {
case ".06" :
document.en_cost.ann_cost.value = .19;
break;
case ".07" :
document.en_cost.ann_cost.value = .22;
break;
case ".08" :
document.en_cost.ann_cost.value = .25;
break;
case ".09" :
document.en_cost.ann_cost.value = .28;
break;
case ".10" :
document.en_cost.ann_cost.value = .31;
break;
}
}
else if (document.en_cost.days_wk.options[document.en_cost.days_wk.selectedIndex].value == 6) {
switch (document.en_cost.ckwh.options[document.en_cost.ckwh.selectedIndex].value) {
case ".06" :
document.en_cost.ann_cost.value = .22;
break;
case ".07" :
document.en_cost.ann_cost.value = .26;
break;
case ".08" :
document.en_cost.ann_cost.value = .30;
break;
case ".09" :
document.en_cost.ann_cost.value = .34;
break;
case ".10" :
document.en_cost.ann_cost.value = .37;
break;
}
}
else {
switch (document.en_cost.ckwh.options[document.en_cost.ckwh.selectedIndex].value) {
case ".06" :
document.en_cost.ann_cost.value = .26;
break;
case ".07" :
document.en_cost.ann_cost.value = .31;
break;
case ".08" :
document.en_cost.ann_cost.value = .35;
break;
case ".09" :
document.en_cost.ann_cost.value = .39;
break;
case ".10" :
document.en_cost.ann_cost.value = .44;
break;
}
}
}
}
}

//-->
</script>
</head>

<body bgcolor="#FFFFFF">
<form method="post" name="en_cost">
How many hours per day do you use your lamp?
<select name="hrs_day" size="1">
<option>Select Hours</option>
<option value="4" onChange="this.form.ann_cost.value=this.options[this.selectedIndex].value">4</option>
<option value="8" onChange="this.form.ann_cost.value=this.options[this.selectedIndex].value">8</option>
<option value="12" onChange="this.form.ann_cost.value=this.options[this.selectedIndex].value">12</option>
</select>
<br>
<br>
How many days per week do you use your lamp?
<select name="days_wk" size="1">
<option>Select Days</option>
<option value="5" onChange="this.form.ann_cost.value=this.options[this.selectedIndex].value">5</option>
<option value="6" onChange="this.form.ann_cost.value=this.options[this.selectedIndex].value">6</option>
<option value="7" onChange="this.form.ann_cost.value=this.options[this.selectedIndex].value">7</option>
</select>
<br>
<br>
What is your energy cost per kilowatt-hour?
<select name="ckwh" size="1">
<option value="0">Select Cost</option>
<option value=".06">.06</option>
<option value=".07">.07</option>
<option value=".08">.08</option>
<option value=".09">.09</option>
<option value=".10">.10</option>
</select>
<br>
<br>
Your annual cost per watt is:
<input type="text" name="ann_cost" size="6" maxlength="6" onFocus="calculateCost()">
<br>
<br>
<br>
<b>Wattage Comparison</b><br>
<br>
How many watts does your incandescent bulb consume?
<input type="text" name="incan_watts" size="6" maxlength="6">
<br>
<br>
What is the wattage of a comparable compact fluorescent bulb?
<input type="text" name="cfl_watts" size="6" maxlength="6">
<br>
<br>
Total amount of wattage you will save with cfl bulbs:
<input type="text" name="watt_save" size="6" maxlength="6" readonly onFocus="this.blur()";>
<br>
<br>
<br>
<b>Annual Savings</b><br>
<br>
<input type="text" name="watt_save" size="6" maxlength="6" readonly onFocus="this.blur()";>
X
<input type="text" name="ann_cost" size="6" maxlength="6" readonly onFocus="this.blur()";>
= $
<input type="text" name="save_lamps" size="6" maxlength="6" readonly onFocus="this.blur()";>
X
<input type="text" name="num_lamps" size="6" maxlength="6">
<br>
<br>
TOTAL SAVINGS :
<input type="text" name="tot_save" size="8" maxlength="8" readonly onFocus="this.blur()";>
</form>

riffy · Apr 17, 2001

Ok,

I set up an array called costValues with all the values (45 in total). Now do I also have to set up a function which calls those values based on the different situations?
Then, I would call that function on the text box which displays the number?

I was just confused on how to call the array when there's no set formula to get the different values so the javascript function will have to contain many if statements.

Thanks
Arif

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

calculator help in javascript

riffy

Programmer

jaredn

Programmer

riffy

Programmer

jaredn

Programmer

riffy

Programmer

riffy

Programmer

Similar threads

Part and Inventory Search

Sponsor