Javascript html计算表单选择不起作用

时间:2012-06-26 19:51:44

标签: javascript

下面创建的表单允许我循环使用四个选项&每个选项都会自动填充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>
                            &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>

1 个答案:

答案 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];