javascript - 循环不会累加表单值的总和

标签 javascript html

我是 Javascript 的新手,我正在做一个我在网上找到的练习。 问题是循环不会从表单中获取值,因此运行计数永远不会更新。感谢您的帮助。

实际上还有一个问题,您知道为什么没有从选中的输入框中提取值吗?即使我遍历循环,函数也会返回零。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

</head>
<body>
<h1>Configure Your GT Super Sportscar</h1>
<form id="orderform" action="#">
<table border="1">

<tr>

<td><input type="radio" name="manual" checked="checked" id="manual" value="17790.00" />GT Manual</td><td>$17,790.00</td> 
</tr>
<tr>
<td><input type="radio" name="manual" id="auto" value="18590.00" />GT Automatic</td><td>$18,590.00</td>
</tr>
<tr>
<td><input type="radio" name="manual" id="smanual" value="22455.00" />GT-S Manual</td><td>$22,455.00</td>
</tr>
<tr>
<td><input type="radio" name="manual" id="sshift" value="23155.00"/>GT-S Sportshift</td><td>$23,155.00</td>
</tr>
</table>
<table border="1">

<tr>
<td><input type="radio" name="manual" id="combo1" value="1235.00" />Option Combo #1</td><td>$1235.00</td>
</tr>
<tr>
<td><input type="radio" name="manual" id="combo2" value="3354.00" />Option Combo #2
<ul>
<li>Rear Spoiler and Fog Lamps</li>
<li>Keyless Entry</li>
<li>Power Tint and Side Moonroof</li>
<li>Power Windows, Doors, and Cruise Control</li>
</ul>
</td>
<td>$3354.00</td>
</tr>
<tr>
<td><input type="radio" name="manual" id="nocombo" value="0" />No Combo</td><td>$0</td>
</tr>

</table>
<table border="1">

<tr>

<td><input type="checkbox" name="amen" id="cac" value="550.00"/>CD Autochanger</td><td>$550.00</td> 
</tr>
<tr>
<td><input type="checkbox" name="amen" id="vss" value="399.00"/>VIP Security System</td><td>$399.00</td>
</tr>
<tr>
<td><input type="checkbox" name="amen" id="adm" value="295.00"/>Auto Dimming Mirror</td><td>$295.00</td>
</tr>

</table>
<table border="1">

<tr>
<td><input type="text" name="price" id="price" /></td><td><input type="button" onclick="showit()" value="Calculate Total" /></td>
</tr>
</table>
</form>
<script type="text/javascript">
/**
* @author Isaac's
*/
function getval(){
var options = document.forms["orderform"].manual;
var optionslength = options.length;
var total = 0;
for (var i = 0; i &lt; optionslength; i++) {
if (options[i].checked) {
options[i].value += total;
}
return total;
}
}
var result1 = getval();
function getval2(){
var total=0;
var checkboxes = document.forms["orderform"].amen;
for (var i = 0; i &lt; checkboxes.length; i++) {
checkboxes[i].value += total;
}
return total;
}

var result2 = getval2();

function showit(){
var total = parseFloat(result1) + parseFloat(result2)
alert(total);
}

</script> 
</body>
</html>

最佳答案

代码有多个问题。

这是一个 working jsFiddle example你可以玩。

有 4 个大问题会阻止您的代码正常工作:

  1. 在你的 if 循环中,当你想添加到你写的总数时:

    options[i].value += total;
    

    这将作用于 options[i].value。你想改变total,所以你应该这样写

    total += parseFloat(options[i].value);
    
  2. getval() 中,您从 inside for 循环返回,如下所示:

    function getval(){
        var options = document.forms["orderform"].manual;
        var optionslength = options.length;
        var total = 0;
        for (var i = 0; i &lt; optionslength; i++) {
            if (options[i].checked) {
                options[i].value += total;
            }
            return total; // <=======   THIS IS STILL INSIDE THE FOR LOOP!!!!!!!!
        }
    }
    

    你想要总计after你所有的计算,所以像这样:

    function getval(){
        var options = document.forms["orderform"].manual;
        var optionslength = options.length;
        var total = 0;
        for (var i = 0; i &lt; optionslength; i++) {
            if (options[i].checked) {
                total += parseFloat(options[i].value);
            }            
        }
        return total; // <===== ALL CALCULATIONS ARE COMPLETED, SO WE CAN RETURN.
    }
    
  3. 最后,在 getval2() 中,您忘记在将这些框添加到总数之前检查它们是否被选中。所以你总是得到相同的总数。您检查复选框是否在 getval() 中选中。在 getval2() 中使用相同的方法。

  4. 当您获得 options[i].value 时,您将获得一个字符串。在将它们添加到 total 之前,您应该将它们转换为数字。你只有在返回总数后才转换为数字,到那时已经发生了各种有趣的连接。看看我在上面的代码片段和 jsFiddle 中使用 parseFloat() 的地方。

关于javascript - 循环不会累加表单值的总和,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3619782/

相关文章:

javascript - 如何向每个用户显示自定义数量的 SVG 圆圈?

javascript - 将 Javascript 格式化为 CoffeeScript

html - 纯 CSS - 多读/少读图像

javascript - 使 div 内的图像占用始终相同的空间

javascript - 多页复选框处理

html - 标签在列表标签​​中掉落

javascript - 为什么 Javascript 将 5 == 8 等同于 true?

jquery - 可编辑文本框内的屏蔽输入不起作用

Javascript 性能 : Fastest way of building and injecting html

JQuery 滑动效果不起作用?