javascript - 计算百分比余数

Question

我正在尝试从 4 个下拉选择选项中自动计算剩余百分比。这是我到目前为止的代码，但我似乎无法让它工作。计算后，未开发百分比应为总百分比加减100%。例如，如果 4 个中的每一个都使用了 10%，则未开发的将是 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>

score 3 · Accepted Answer

看看你的功能。您正在从每个<select>选项中获取正确的值，但随后您将结果存储在一个名为strUser您已 [重新] 声明 4 次的变量中。您正在覆盖该值，然后甚至不使用它。

您正在尝试求和（使用 +）实际的 HTML<select>元素，而不是您（尝试）提取的选定值。

将值分配给单独的变量，然后将它们转换为整数。我会删除valueHTML 中属性的“%”符号，以便它们更易于使用。一旦你做到了，那么你基本上只需要做

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]s 放在那里是因为（我很确定）getElementsByName返回一个元素列表，而不是一个元素。真的，您应该更喜欢给您的输入ID属性，然后使用getElementById。

score 0 · Accepted Answer

这是一个基于先前答案中提到的一些建议的工作示例：

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();
};

注意在 each 中<select>，anid现在是如何出现的。

来自更改的 HTML 的示例

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

javascript - 计算百分比余数

2 回答 2

Related

Reference