Question

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

我很无能......

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

    }

Answer 1

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

点击提交按钮：<input type="button"> 实际上似乎你不需要那里的表格

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

<button type="submit" onclick="calcSub(); return false;">Calculate</button><br>

Answer 2

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

tax.innerHTML = "Tax:" + " " + "$" + (input.value - subTotalCalc);`

Answer 3

点击按钮后，您的表单即被提交，因此值正在计算中，但在重新加载页面时会立即消失。

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

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

选中fiddle。

Answer 4

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

Check the demo

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

如果需要，我很乐意进一步解释代码......
请注意，如果您考虑就此问题提出后续问题，check this fiddle first，这并不能解决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

Answer 5

只需从代码中删除所有return，然后在末尾添加return false

单击按钮后，Javascript代码消失

5 个答案:

Check the demo