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>

Answer 1

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

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

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

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。

Answer 2

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

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

计算剩余百分比

2 个答案: