Как получить значение из ввода формы в переменную

Question

Только что начал изучать Javascript сегодня, и я застрял. Страница только перезагружается, когда я отправляю. Я помещаю. Значение в неправильном месте? Может быть, какая-то другая ошибка?

<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

Передача формы произойдет до того, как функция будет выполнена, поэтому страница будет перезагружаться, а не запускать вашу функцию при нажатии этой кнопки.

Вместо этого используйте <input type="button">.

Answer 2

Вам нужно положить

return false; 

В конце вашей функции так, что страница не обновляется.

Как это

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

} 

Это предотвратит форму от их представления.

И вместо того, чтобы присоединять событие щелчка необходимо использовать отправить событие

Добавить ID в виде

<form id="myForm"> 

Listen, когда форма была отправлена ​​

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

И измените вашу кнопку на

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