자바 스크립트 html 계산 된 양식 선택이 작동하지 않습니다

Question

아래 양식을 작성하면 네 개의 옵션이 있습니다. & 옵션을 사용하면 html 양식의 요소를 자동으로 채 웁니다. 그런 다음 양식을 한 번만 계산할 수 있습니다. 그 부분 후에 나는 길을 잃는다. 선택한 경우 다른 드롭 다운 데이터를 호출하는 스위치가 필요하다고 생각합니다. 또는 루프. 계산 후 다른 값을 선택하면 양식이 유효하지 않은 것으로 채워집니다.

어떤 도움이라도 며칠 동안이 문제에 고심하고 있습니다. 큰 감사를 드린다. 당신이 그 바르 등을 사용하고 있기 때문에

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

가 계산 (에 덮어 쓰기)

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

:

 <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> 

Answer 1

당신은

이 변수를 변경하지 마십시오 일부 변수를 덮어 쓰는 당신의 계산을위한 aux 값 나는 새로운 고유 변수를 만드는 것이 좋습니다 :

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

을