2

今天刚开始学习Javascript，我被困住了。当我提交时，页面会重新加载。我是否将 .value 放在错误的位置？也许其他一些菜鸟错误？

    <script type="text/javascript">
        function Calculate() {
        var volume = document.getElementById('volume').value;
        var carbonation = document.getElementById('carbonation').value;
        var temperature = document.getElementById('temperature').value;

        var sucrose = (15.195 * volume * (carbonation - 3.0378 + (0.050062 * temperature) - (0.00026555 * (temperature * temperature))))/28.4;
        var dextrose = sucrose + (sucrose * 0.15);

        document.write('<div id="result">You need ' + math.round(dextrose * 100)/100 + ' ounces of dextrose</div>');}
    </script>
    <form>
    <input id="volume" type="text">
    <input id="carbonation" type="text">
    <input id="temperature" type="text">
    <input type="submit" onclick="Calculate();" value="Calculate">
    </form>
4

2 回答 2

3

你需要把

return false;

在函数结束时，页面不会重新加载。

像这样

function Calculate() {
    // All Code here...

}

这将阻止提交表单。

而不是附加点击事件，您需要使用提交事件

在表单中添加 ID

<form id="myForm">

监听表单何时提交

var myForm = document.getElementById('myForm');
myForm.onsubmit = Calculate;

并将您的按钮更改为

<input type="submit" value="Calculate">
于 2013-07-27T00:28:21.930 回答
1

表单提交将在函数执行之前发生，因此当您单击该按钮时页面将重新加载而不是运行您的函数。

改用一个<input type="button">。

于 2013-07-27T00:26:37.050 回答