1

我正在尝试制作一个小计计算工具，但我无法继续，因为我不知道问题出在哪里。提交表单或单击按钮时，一切都会很快消失。

这是小提琴 :: http://jsfiddle.net/xFmBK/

我一无所知...

    function calcSub(){

        var input = document.getElementById('fld'),
            subTotal = document.getElementById('sub-total'),
            tax = document.getElementById('tax'),
            total = document.getElementById('total');

        var subTotalCalc = input.value / 1.06;

        var flag = true;


        if(input.value == "" || input.value == null){
            alert("Please enter in a total!");
            return false;
        } else {
            subTotal.innerHTML = "Subtotal:" + " " + "$" + subTotalCalc;
            tax.innerHTML = "Tax:" + " " + "$" + input.value - subTotalCalc;
            total.innerHTML = input.value;
            return flag;
        }

    }
4

5 回答 5

3

发生这种情况是因为您的提交按钮实际上对某些操作进行了表单提交，并且页面正在刷新。有一些方法可以修复行为，例如：

使您的提交按钮只是一个按钮：<input type="button"> 实际上您似乎不需要那里的表格

或将 return false 添加到 onClick 处理程序：

<button type="submit" onclick="calcSub(); return false;">Calculate</button><br>
于 2013-08-08T07:04:41.283 回答
1

当您单击按钮时，您的表单将被提交，因此值正在被计算，但随着页面重新加载而立即消失。

尝试添加onsubmit='return false;'到您的表单标签，页面重新加载将被阻止。

或者，您可以将按钮类型更改为button。

检查这个小提琴。

于 2013-08-08T07:06:23.997 回答
1

请注意另一个问题：您必须在 . 周围使用括号(input.value - subTotalCalc)。如果没有括号，您将尝试添加和减去字符串，这会导致NaN.

tax.innerHTML = "Tax:" + " " + "$" + (input.value - subTotalCalc);`
于 2013-08-08T07:03:55.790 回答
0

您需要阻止提交表单。当表单元素处于焦点时，用户可以通过按 Enter 键或单击submit按钮来提交表单。即使onclick事件返回 false，提交事件也不会改变。
我冒昧地分叉了你的小提琴：

检查演示

window.addEventListener('load',function()
{
    var input = document.getElementById('fld'),
        subTotal = document.getElementById('sub-total'),
        tax = document.getElementById('tax'),
        total = document.getElementById('total'),
        subTotalCalc;
    document.getElementById('calcForm').addEventListener('submit',function(e)
    {
        e = e || window.event;
        e.preventDefault();//prevent form's default behaviour
        e.stopPropagation();//if submit was sent by clicking submit button, stop the event here
        if (input.value === '' || input.value != +(input.value))
        {
            alert('Please enter valid subtotal (numeric)');
            return;
        }
        subTotalCalc = input.value / 1.06;
        subTotal.innerHTML = "Subtotal:" + " " + "$" + subTotalCalc;
        tax.innerHTML = "Tax:" + " " + "$" + (input.value - subTotalCalc);
        total.innerHTML = input.value;
    },false)
},false);

如果需要，我很乐意进一步解释代码......
请注意，这并不能解决 JS 在浮点精度方面的问题，如果您正在考虑就此事提出后续问题，请检查这个小提琴第一！我在toDecimal这里添加了一个简单的功能：

var toDecimal = function(num, precision)
{
    precision = precision || 2;
    num = +(num || 0);
    return ( Math.round(num*Math.pow(10, precision))
             / Math.pow(10,precision)
           ).toFixed(precision);
};

所以首先乘以 10^n，四舍五入并再次除以 10^n 以获得所需的浮点数。为了避免仍然可能发生的任何问题（尽管不应该有任何 AFAIKT，我也添加了一个toFixed(n)电话。如果四舍五入的数字是213.00

于 2013-08-08T07:13:46.693 回答
0

只需return从您的代码中删除所有并return false在最后添加

于 2013-08-08T07:18:48.253 回答