Question

刚开始学习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>

Answer 1

你需要把

return false;

在功能结束时，页面不会重新加载。

喜欢这个

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

}

这将阻止提交表单。

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

在表单中添加ID

<form id="myForm">

在提交表单时收听

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

将按钮更改为

<input type="submit" value="Calculate">

Answer 2

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

改为使用<input type="button">。

如何从表单输入中获取值到变量中

2 个答案: