下面创建的表单允许我循环使用四个选项&每个选项都会自动填充html表单中的元素。然后,我可以一次计算表格。在那之后,我迷路了。我认为如果选择,它需要切换来调用其他下拉数据。或循环。 当我在计算后选择另一个值时,表单填写无效。
任何帮助都会非常感激我几天来一直在努力解决这个问题。非常感谢。
<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>
</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>
答案 0 :(得分:0)
您正在覆盖一些不应更改的变量
这些变量:
var led_watts = new Array();
var led_life = new Array();
var led_cost = new Array();
在Calculate()
中被覆盖led_watts=parseInt(form.led_watts.value);
led_cost=parseFloat(form.led_cost.value);
led_life=parseInt(form.led_life.value);
由于您使用这些变量作为计算的辅助值,我建议您创建新的唯一变量:
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);
更好的是重命名数组,使其名称清楚地表明它们是数组。这有助于避免将来遇到这个问题:
var led_watts_values = new Array();
var led_life_values = new Array();
var led_cost_values = new Array();
我还建议您检查文字数组初始化(http://www.w3schools.com/js/js_obj_array.asp),因为它可以节省大量时间:
var led_watts_values = [0, 60, 50, 40, 35];