Javascript 计算剩余百分比_Javascript_Html_Select_Drop Down Menu

Javascript 计算剩余百分比

javascript html select drop-down-menu

Javascript 计算剩余百分比,javascript,html,select,drop-down-menu,Javascript,Html,Select,Drop Down Menu,我正在尝试从4下拉选择选项自动计算剩余百分比。这是我到目前为止的代码，但我似乎无法让它工作。计算后，未开发百分比应为合计百分比减去100%。例如，如果4个项目中的每一个都使用了10%，那么未开发的项目将是60%。非常感谢您的帮助 <html> <head> <title>Calculation</title> <script language="javascript" type="text/javascript"> functio

我正在尝试从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>


算计
函数calcPercentUseSum（）{
var Percent1=document.getElementsByName（“SingleFamilyUsePercent”）；
var strUser=Percent1。选项[Percent1.selectedIndex]。值；
var Percent2=document.getElementsByName（“MultifamilyUsePercent”）；
var strUser=Percent2.选项[Percent2.selectedIndex].值；
var Percent3=document.getElementsByName（“CommercialUserPercent”）；
var strUser=Percent3.选项[Percent3.selectedIndex].值；
var Percent4=document.getElementsByName（“IndustrialUsePercent”）；
var strUser=Percent4.选项[Percent4.selectedIndex].值；
document.getElementsByName（“未开发”）。值=百分比1
+百分比2
+百分比3
+百分比4；
}
目前用途：
单身家庭
0%
5%
10%
15%
20%
25%
30%
35%
40%
45%
50%
55%
60%
65%
70%
75%
80%
85%
90%
95%
100%
多家庭
0%
5%
10%
15%
20%
25%
30%
35%
40%
45%
50%
55%
60%
65%
70%
75%
80%
85%
90%
95%
100%
商业的
0%
5%
10%
15%
20%
25%
30%
35%
40%
45%
50%
55%
60%
65%
70%
75%
80%
85%
90%
95%
100%
工业的
0%
5%
10%
15%
20%
25%
30%
35%
40%
45%
50%
55%
60%
65%
70%
75%
80%
85%
90%
95%
100%
未开发

看看您的函数。您正在从每个

选项中获取正确的值，但随后将结果存储在一个名为

strUser

的变量中，您已经[重新]声明了4次。您正在覆盖该值，然后甚至不使用它

您试图（使用+）对实际的HTML

元素求和，而不是（试图）提取的选定值

将这些值分配给不同的变量，然后将它们转换为整数。我会删除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

。

看看您的函数。您正在从每个

选项中获取正确的值，但随后将结果存储在一个名为

strUser

的变量中，您已经[重新]声明了4次。您正在覆盖该值，然后甚至不使用它

您试图（使用+）对实际的HTML

元素求和，而不是（试图）提取的选定值

将这些值分配给不同的变量，然后将它们转换为整数。我会删除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

。

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

JavaScript

请注意，现在每个

中都有一个

id

修改后的HTML样本


0%
...

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

JavaScript

请注意，现在每个

中都有一个

id

修改后的HTML样本


0%
...

请注意标记是正确的-getElementsByName将返回一个数组，需要对其进行解引用。此外，您可能不想在value属性中使用百分号，而只想将整数放在那里。这就是value属性存在的原因，因此您可以使用格式为

显示值

的标记。当calc函数启动并且

选择元素之一选择了”
值时，parseInt（“”
将返回NaN
，然后将减去总数NaN+50+5+10
将返回NaN
。请注意，Mark是对的-getElementsByName将返回一个数组，需要取消引用该数组。此外，您可能不想在value属性中使用百分号，而只想将整数放在那里。这就是value属性存在的原因，因此可以使用Display形式的标记
    <select size="1" name="SingleFamilyUsePercent" id="SingleFamilyUsePercent"
    onchange="calcPercentUseSum()" value="Single Family" tabindex="92">
        <option value=""></option>
        <option value="0">0%</option>
...