单击按钮后，Javascript代码消失

Javascript code disappears after button click

本文关键字：代码 消失 Javascript 按钮 单击      更新时间：2023-09-26

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

这是小提琴：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;
        }
    }

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

将提交按钮设置为按钮：<input type="button">实际上你似乎不需要的表格

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

<button type="submit" onclick="calcSub(); return false;">Calculate</button><br>
请注意另一个问题：必须在(input.value - subTotalCalc)周围使用括号。如果没有括号，您将尝试添加和减去字符串，这将导致NaN。 
tax.innerHTML = "Tax:" + " " + "$" + (input.value - subTotalCalc);`

当您单击按钮时，表单将被提交，因此值将被计算出来，但在重新加载页面时会立即消失。

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

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

检查一下这把小提琴。

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

您需要阻止表单被提交。当表单元素处于焦点时，用户可以按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在浮点精度方面的问题，如果你想问一个关于这个问题的后续问题，请先检查一下这个fiddle！我在这里添加了一个简单的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 ，这可能会很有用

相关文章：