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

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...

}

这将阻止提交表单。

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

在表单中添加ID

<form id="myForm">

表单提交时监听

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

然后将您的按钮更改为

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