JavaScript keyup和onload计算字段总数

我正在使用JavaScript计算两个文本输入。它与keyup一起工作。即键入时，余额实时计算。但是，我希望总数不仅在keyup上计算和显示，而且在onload上显示，这样当我加载页面时，它就可以计算字段了

这是我目前只针对keyup的javascript代码

<script type="text/javascript">
$(document).on("keyup", function() {
var sum = 0;
$(".totalCal").each(function(){
    sum += +$(this).val();
});
$("#total").val(sum);

document.getElementById('grandTotal').innerHTML = sum.toFixed(2);
});
</script>

$（document）.on（“keyup”，function（））{
var总和=0；
$（“.totalCal”）.each（函数（）{
sum+=+$（this.val（）；
});
美元（“#总计”）.val（总和）；
document.getElementById（'grandTotal'）.innerHTML=sum.toFixed（2）；
});

我认为这样的事情是可行的

    <script type="text/javascript">

    $(document).ready(calculate());   
    $(document).on("keyup", calculate());

    function calculate() {
        var sum = 0;
        $(".totalCal").each(function(){
            sum += +$(this).val();
        });
        $("#total").val(sum);

        document.getElementById('grandTotal').innerHTML = sum.toFixed(2);
        });
    }
</script>

$（文档）.ready（计算（））；
$（document）.on（“keyup”，calculate（））；
函数计算（）{
var总和=0；
$（“.totalCal”）.each（函数（）{
sum+=+$（this.val（）；
});
美元（“#总计”）.val（总和）；
document.getElementById（'grandTotal'）.innerHTML=sum.toFixed（2）；
});
}

HTML:

---

工作，太好了。谢谢你。不过有一件事，内部HTML不会更新。也许有一种方法可以为计算出的答案分配一个变量，并将其显示为内部html？谢谢你的帮助！随时都可以，德里克。innerHTML似乎在这个JSFIDLE中更新：

<input type="text" value="0" class="totalCal"><br />
<input type="text" value="1" class="totalCal"><br />
<input type="text" value="2" class="totalCal"><br />
<input type="text" value="3" class="totalCal"><br />
<div id="total">0</div>

$(document).ready(calculate);   
$(document).on("keyup", calculate);

function calculate() {
    var sum = 0;
    $(".totalCal").each(function(){
        sum += +$(this).val();
    });
    $("#total").html(sum);
}