Расчет Процент Остаток

Я пытаюсь авто вычислить процент останова от 4 выпадающего списка выбора. Это код, который у меня есть до сих пор, но я не могу заставить его работать. После расчета недоработанный процент должен составлять общий процент, добавленный минус 100%. Например, если бы каждый из 4 использовал 10%, Undeveloped составлял бы 60%. Буду признателен за любую оказанную помощь.Расчет Процент Остаток

<html> 

<head> 
<title>Calculation</title> 

<script language="javascript" type="text/javascript"> 

function calcPercentUseSum(){ 
var Percent1 = document.getElementsByName("SingleFamilyUsePercent"); 
var strUser = Percent1.options[Percent1.selectedIndex].value; 
var Percent2 = document.getElementsByName("MultifamilyUsePercent"); 
var strUser = Percent2.options[Percent2.selectedIndex].value; 
var Percent3 = document.getElementsByName("CommericalUsePercent"); 
var strUser = Percent3.options[Percent3.selectedIndex].value; 
var Percent4 = document.getElementsByName("IndustrialUsePercent"); 
var strUser = Percent4.options[Percent4.selectedIndex].value; 
document.getElementsByName("Undeveloped").value = Percent1 
         + Percent2 
         + Percent3 
         + Percent4; 
} 




</script> 






</head> 

<body> 

<form method="post" action> 




<table width="640"> 
    <tr> 
    <td colspan="5"></td> 
    </tr> 
    <tr> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <th rowspan="3" colspan="3" valign="bottom" align="left">&nbsp;Present Use:</th> 
    </tr> 
    <tr> 
    <td style="height: 21px">&nbsp;</td> 
    <td style="height: 21px"></td>   
    </tr> 
    <tr> 
    <th colspan="3" align="left" style="height: 18px">&nbsp;</th>     
    </tr> 
    <tr> 
    <td style="height: 25px">&nbsp;</td> 
    <td colspan="2" style="height: 25px">&nbsp;</td> 
    <td style="height: 25px">Single Family</td> 
    <td style="height: 25px"><select size="1" name="SingleFamilyUsePercent" 
    onchange="calcPercentUseSum" value="Single Family" tabindex="92"> 
     <option value=""></option> 
     <option value="0%">0%</option> 
     <option value="5%">5%</option> 
     <option value="10%">10%</option> 
     <option value="15%">15%</option> 
     <option value="20%">20%</option> 
     <option value="25%">25%</option> 
     <option value="30%">30%</option> 
     <option value="35%">35%</option> 
     <option value="40%">40%</option> 
     <option value="45%">45%</option> 
     <option value="50%">50%</option> 
     <option value="55%">55%</option> 
     <option value="60%">60%</option> 
     <option value="65%">65%</option> 
     <option value="70%">70%</option> 
     <option value="75%">75%</option> 
     <option value="80%">80%</option> 
     <option value="85%">85%</option> 
     <option value="90%">90%</option> 
     <option value="95%">95%</option> 
     <option value="100%">100%</option> 
     </select></td>     
    </tr> 
    <tr> 
    <td>&nbsp;&nbsp;&nbsp;</td> 
    <td colspan="2">&nbsp;</td> 
    <td>Multifamily</td> 
    <td><select size="1" name="MultifamilyUsePercent" onchange="calcPercentUseSum" 
value="Multifamily" tabindex="93"> 
     <option value=""></option> 
     <option value="0%">0%</option> 
     <option value="5%">5%</option> 
     <option value="10%">10%</option> 
     <option value="15%">15%</option> 
     <option value="20%">20%</option> 
     <option value="25%">25%</option> 
     <option value="30%">30%</option> 
     <option value="35%">35%</option> 
     <option value="40%">40%</option> 
     <option value="45%">45%</option> 
     <option value="50%">50%</option> 
     <option value="55%">55%</option> 
     <option value="60%">60%</option> 
     <option value="65%">65%</option> 
     <option value="70%">70%</option> 
     <option value="75%">75%</option> 
     <option value="80%">80%</option> 
     <option value="85%">85%</option> 
     <option value="90%">90%</option> 
     <option value="95%">95%</option> 
     <option value="100%">100%</option> 
     </select></td>     
    </tr> 
    <tr> 
    <td>&nbsp;</td> 
    <td colspan="2">&nbsp;</td> 
    <td>Commericial</td> 
    <td><select size="1" name="CommericalUsePercent" onchange="calcPercentUseSum" 
value="Commericial" tabindex="94"> 
     <option value=""></option> 
     <option value="0%">0%</option> 
     <option value="5%">5%</option> 
     <option value="10%">10%</option> 
     <option value="15%">15%</option> 
     <option value="20%">20%</option> 
     <option value="25%">25%</option> 
     <option value="30%">30%</option> 
     <option value="35%">35%</option> 
     <option value="40%">40%</option> 
     <option value="45%">45%</option> 
     <option value="50%">50%</option> 
     <option value="55%">55%</option> 
     <option value="60%">60%</option> 
     <option value="65%">65%</option> 
     <option value="70%">70%</option> 
     <option value="75%">75%</option> 
     <option value="80%">80%</option> 
     <option value="85%">85%</option> 
     <option value="90%">90%</option> 
     <option value="95%">95%</option> 
     <option value="100%">100%</option> 
     </select></td>   
    </tr> 
    <tr> 
    <td>&nbsp;&nbsp;</td> 
    <td colspan="2">&nbsp;</td> 
    <td>Industrial</td> 
    <td><b> 
    <select size="1" name="IndustrialUsePercent" onchange="calcPercentUseSum" 
value="Industrial" tabindex="95" style="height: 21px"> 
     <option value=""></option> 
     <option value="0%">0%</option> 
     <option value="5%">5%</option> 
     <option value="10%">10%</option> 
     <option value="15%">15%</option> 
     <option value="20%">20%</option> 
     <option value="25%">25%</option> 
     <option value="30%">30%</option> 
     <option value="35%">35%</option> 
     <option value="40%">40%</option> 
     <option value="45%">45%</option> 
     <option value="50%">50%</option> 
     <option value="55%">55%</option> 
     <option value="60%">60%</option> 
     <option value="65%">65%</option> 
     <option value="70%">70%</option> 
     <option value="75%">75%</option> 
     <option value="80%">80%</option> 
     <option value="85%">85%</option> 
     <option value="90%">90%</option> 
     <option value="95%">95%</option> 
     <option value="100%">100%</option> 
     </select></b></td> 
    </tr> 
    <tr> 
    <td>&nbsp;</td> 
    <td colspan="2">&nbsp;</td> 
    <td>Undeveloped</td> 
    <td><input name="Undeveloped" readonly="readonly" type="text" /></td> 
    </tr> 
</table><br /> 

<input type="submit" value="Save Form" name="tbSubmit" tabindex="253" /> 


</form> 
</body> 
</html>

источник

2013-03-01 user2125447

Посмотрите на свою функцию. Вы извлекаете правильное значение из каждого из параметров <select>, но затем вы сохраняете результат в переменной с именем strUser, которую вы [повторно] объявили 4 раза. Вы переписываете значение, а затем даже не используете его.

Вы пытаетесь суммировать (используя +) фактические элементы HTML <select>, а не выбранные значения, которые вы пытаетесь вытащить.

Назначьте значения отдельных переменных, а затем переведите их в целые числа. Я бы удалил знак «%» с атрибутами value в вашем HTML, чтобы с ними было легче работать. После того, как вы сделали это, то вы, по сути просто сделать

var Percent1 = document.getElementsByName("SingleFamilyUsePercent")[0]; 
var Value1 = Percent1.options[Percent1.selectedIndex].value; 
var Percent2 = document.getElementsByName("MultifamilyUsePercent")[0]; 
var Value2 = Percent2.options[Percent2.selectedIndex].value; 
... 
var Total = parseInt(Value1) + parseInt(Value2); 
var Remainder = 100 - Total; 

document.getElementsByName("Undeveloped")[0].value = Remainder;

Я положил [0] с на там, потому что (я почти уверен) getElementsByName возвращает список элементов, а не один. Действительно, вы должны предпочесть давать свои входы ID атрибутов, а затем использовать getElementById.

источник

2013-03-02 00:05:26 mpen

Просто отметить, что Марк прав - getElementsByName возвращает массив, который должен быть разыменовываются. Кроме того, вместо того, чтобы иметь знак процента внутри атрибута value, вы, вероятно, хотите просто поместить туда целое число. Вот почему атрибут value существует, поэтому вы можете иметь теги формы ''. – bfuoco

Когда функция calc срабатывает, и один из элементов 'select' имеет значение' '' ', то' parseInt ("") 'вернет' NaN', который затем сбросит общее число; 'NaN + 50 + 5 + 10' вернет' NaN'. – mg1075

Вот работающий пример, который опирается на некоторые из предложений, упомянутых в предыдущих ответах:

http://jsfiddle.net/wdqgF/

JavaScript

calcPercentUseSum = function() { 
    var Use1 = document.getElementById("SingleFamilyUsePercent"), 
     Use2 = document.getElementById("MultifamilyUsePercent"), 
     Use3 = document.getElementById("CommericalUsePercent"), 
     Use4 = document.getElementById("IndustrialUsePercent"); 

    var Perc1 = Use1.options[Use1.selectedIndex].value, 
     Perc2 = Use2.options[Use2.selectedIndex].value, 
     Perc3 = Use3.options[Use3.selectedIndex].value, 
     Perc4 = Use4.options[Use4.selectedIndex].value; 

    function cleanVal(n) { 
     // You do not want to call parseInt on an empty string "". 
     // parseInt("") will return NaN, 
     // and NaN plus a number will return NaN. 
     // e.g., "NaN + 5 + 10 + 20" returns NaN. Avoid this. 
     if (n === "") { 
      return 0; 
     } else { 
      return parseInt(n, 10); 
     } 
    } 

    var sumPerc = cleanVal(Perc1) + cleanVal(Perc2) + cleanVal(Perc3) + cleanVal(Perc4); 

    var Total = function() { 
     if (Perc1 === "" && Perc2 === "" && Perc3 === "" && Perc4 === "") { 
      // To cover the scenario where the user selects item(s), 
      // but then reverts all items back to their first/empty option 
      return ""; 
     } else if (sumPerc > 100) { 
      // To cover the case where the Present Use Totals exceed 100%. 
      return "0%";  
     } else { 
      return (100 - sumPerc) + "%"; 
     } 
    }; 

    document.getElementById("Undeveloped").value = Total(); 
};

Обратите внимание, как в каждом <select>, id является сейчас подарок.

образца из измененного HTML

<select size="1" name="SingleFamilyUsePercent" id="SingleFamilyUsePercent" 
    onchange="calcPercentUseSum()" value="Single Family" tabindex="92"> 
     <option value=""></option> 
     <option value="0">0%</option> 
...

источник

2013-03-02 01:48:38 mg1075

Расчет Процент Остаток

ответ

Смежные вопросы