当前位置: 动力学知识库 > 问答 > 编程问答 >

Javascript html calculated form selections not working

问题描述:

The form created below allows me to loop though four options & each option will auto fill elements in an html form. I can then calculate the form ok once. After that part I'm lost. I think it needs a switch to call the other drop down data if selected. Or a loop.

When I select another value after the calculation the form fills in with invalid.

Any help would be much appreciated I've been struggling with this for a few days now. Big Thanks.

 <form name="LED_savings">

<script language="JAVASCRIPT">

<!--

//electricity_cost inc_watts led_watts led_cost bulbcount hoursday, compute savings_year and payback_in_years

var led_watts = new Array();

var led_life = new Array();

var led_cost = new Array();

led_watts[0] = "";

led_life[0] = "";

led_cost[0] = "";

led_watts[1] = 60;

led_life[1] = "50000";

led_cost[1] = "19.99";

led_watts[2] = 50;

led_life[2] = "55000";

led_cost[2] = "19.99";

led_watts[3] = 40;

led_life[3] = "55000";

led_cost[3] = "19.99";

led_watts[4] = 35;

led_life[4] = "55000";

led_cost[4] = "19.99";

function Choice() {

//x = document.getElementById("users");

y = document.getElementById("wattage");

//x.value = y.options[y.selectedIndex].text;

document.getElementById("led_watts").value = led_watts[y.selectedIndex];

document.getElementById("led_life").value = led_life[y.selectedIndex];

document.getElementById("led_cost").value = led_cost[y.selectedIndex];

}

//resetform

//calculations

function validateForm(form) {

if ( form.electricity_cost.value == "" || parseFloat(form.electricity_cost.value)<=0.0) { alert("Please enter the cost of your electricity."); return false; }

if ( form.inc_watts.value=="" || parseInt(form.inc_watts.value)<=0) {alert("Please enter the wattage of the existing lamp."); return false; }

if ( form.led_watts.value=="" || parseInt(form.led_watts.value)<=0) {alert("Please enter the wattage of the LED lamp."); return false; }

if ( form.inc_life.value=="" || parseInt(form.inc_life.value)<=0) {alert("Please enter the expected life in hours of the existing lamp."); return false; }

if ( form.led_life.value=="" || parseInt(form.led_life.value)<=0) {alert("Please enter the expected life in hours of the LED lamp."); return false; }

if ( form.inc_cost.value=="" || parseFloat(form.inc_cost.value)<0) {alert("Please enter the cost of the existing lamp."); return false; }

if ( form.led_cost.value=="" || parseFloat(form.led_cost.value)<0) {alert("Please enter the cost of the LED lamp."); return false; }

if ( form.bulbcount.value=="" || parseInt(form.bulbcount.value)<=0) {alert("Please enter the number of lamps being replaced."); return false; }

if ( form.hoursday.value=="" || parseFloat(form.hoursday.value)<=0) {alert("Please enter the hours per day the lamp is typically on."); return false; }

return true;

}

function roundPennies(s) {

var str=s.toString()+"0000";

var indexdot = str.indexOf(".");

var len=str.length;

if (indexdot>0 && indexdot<str.length+3) {

s=str.substring(0,indexdot+3);

}

return s;

}

function Calculate(form) {

savings_year = "0.00";

payback_in_years = "99.99";

life_years = "99.99";

savings_life = "0.00";

result=validateForm(form);

if ( result ) {

electricity_cost=parseFloat(form.electricity_cost.value);

inc_watts=parseInt(form.inc_watts.value);

led_watts=parseInt(form.led_watts.value);

led_cost=parseFloat(form.led_cost.value);

inc_cost=parseFloat(form.inc_cost.value);

led_life=parseInt(form.led_life.value);

inc_life=parseInt(form.inc_life.value);

bulb_count=parseInt(form.bulbcount.value);

hours_day=parseFloat(form.hoursday.value);

hours_year=hours_day*365;

life_years = led_life / hours_year;

// What's the LED energy cost per hour?

led_cost_per_hour = led_watts * electricity_cost / 1000;

inc_cost_per_hour = inc_watts * electricity_cost / 1000;

// What's the replacement cost per hour of use?

led_opcost_per_hour = led_cost / led_life;

inc_opcost_per_hour = inc_cost / inc_life;

// Total operating cost per hour

led_cost_per_hour = led_cost_per_hour + led_opcost_per_hour;

inc_cost_per_hour = inc_cost_per_hour + inc_opcost_per_hour;

// Total cost per year

led_cost_year = hours_year * led_cost_per_hour;

inc_cost_year = hours_year * inc_cost_per_hour;

// what is the life cost savings:

saving_base = inc_cost_year - led_cost_year;

savings_life = life_years * saving_base;

savings_life *= bulb_count;

// Savings per year and delta cost on purchase price

savings_year = inc_cost_year - led_cost_year;

delta_cost = led_cost - inc_cost;

// Payback period

payback_period = delta_cost / savings_year;

// Savings / year should be multiplied by bulb count - but this

// should not affect payback period.

savings_year *= bulb_count;

}

savings_year=roundPennies(savings_year);

payback_in_years=roundPennies(payback_period);

life_years=roundPennies(life_years);

savings_life=roundPennies(savings_life);

form.savings_year.value = savings_year;

form.payback_in_years.value = payback_in_years;

form.life_years.value = life_years;

form.savings_life.value = savings_life;

return;

}

//end of code hiding -->

</script><script language="JavaScript">focus()</script>

<table class="calculator">

<tbody>

<tr>

<td>

Wattage of current bulb</td>

<td style="margin-left: 20px">

<select id="wattage" name="inc_watts" onchange="Choice();setAndReset(this);">

<option>Select Wattage</option>

<option value="1">60 Watts</option>

<option value="2">50 Watts</option>

<option value="3">40 Watts</option>

<option value="4">35 Watts</option>

</select>

</td>

</tr>

<tr>

<td>

Number of lamps being replaced</td>

<td>

<input name="bulbcount" size="10" type="text" value="1" /></td>

</tr>

<tr>

<td>

My electricity cost, in pence per kwh *<br />

<sub>(average rate is 15p/kwh)</sub></td>

<td>

<input name="electricity_cost" size="10" type="text" value="0.15" /></td>

</tr>

<tr>

<td>

FLUX LED BULB Equivalent Wattage</td>

<td>

<input id="led_watts" name="led_watts" size="10" type="text" /></td>

</tr>

<tr>

<td>

LED lamp life 25 Years (hours)</td>

<td>

<input id="led_life" name="led_life" size="10" type="text" /></td>

</tr>

<tr>

<td>

Existing lamp life 25 Years (hours)</td>

<td>

<input name="inc_life" size="10" type="text" value="1000" /></td>

</tr>

<tr>

<td>

Cost per LED replacement lamp £<br />

<sub>(average price per bulb)</sub></td>

<td>

<input id="led_cost" name="led_cost" size="10" type="text" /></td>

</tr>

<tr>

<td>

Cost per existing bulb £<br />

<sub>(average price per bulb)</sub></td>

<td>

<input name="inc_cost" size="10" type="text" value="6" /></td>

</tr>

<tr>

<td>

Number of hours/day bulb is in use<br />

<sub>(average usage is 4 hours per day)</sub></td>

<td>

<input name="hoursday" size="10" type="text" value="6" /></td>

</tr>

<tr>

<td>

&nbsp;</td>

<td>

<input onclick="Calculate(this.form)" size="10" type="button" value="Calculate" /></td>

</tr>

<tr>

<td>

Savings per year</td>

<td>

<input name="savings_year" size="10" type="text" /></td>

</tr>

<tr>

<td>

Usable Life of LEDs in Years</td>

<td>

<input name="life_years" size="10" type="text" /></td>

</tr>

<tr>

<td>

Payback in years</td>

<td>

<input name="payback_in_years" size="10" type="text" /></td>

</tr>

<tr>

<td>

Savings OverLife of LED Bulbs</td>

<td>

<input name="savings_life" size="10" type="text" /></td>

</tr>

</tbody>

</table>

</form>

网友答案:

You are overwriting some variables that should not change

These variables:

var led_watts = new Array();
var led_life = new Array();
var led_cost = new Array();

Are overwritten in Calculate()

led_watts=parseInt(form.led_watts.value);
led_cost=parseFloat(form.led_cost.value);
led_life=parseInt(form.led_life.value);

Since you are using those vars as aux values for your calculation I would suggest that you create new unique variables:

var curr_led_watts=parseInt(form.led_watts.value);
var curr_led_cost=parseFloat(form.led_cost.value);
var curr_led_life=parseInt(form.led_life.value);

Even better would be that you rename the arrays so that their name clearly indicates that they are arrays. This should help avoid running into this issues in the future:

var led_watts_values = new Array();
var led_life_values = new Array();
var led_cost_values = new Array();

I also suggest that you check out literal array initialization ( http://www.w3schools.com/js/js_obj_array.asp ) since it will save you tons of time:

var led_watts_values = [0, 60, 50, 40, 35];
分享给朋友:
您可能感兴趣的文章: