使用javascript从表单，计算和更新html内容中获取数字值

我正在尝试用HTML和javascript制作一个非常简单的计算器但它仍然不起作用

我的问题是：
1.如何从表单中获取值并将其设置为数字，而不是字符串？
2.如何在javascript中执行二次计算？
3.如何使用javascript更新html内容？ 因此，每当我更改输入表单的值并按下提交时，结果将根据我输入的输入而改变，我已经尝试了document.getElementById（“idhere”）。innerHTML = valuehere; 但仍然无法正常工作。

 function calculateThis(form) { var userweight=form.weight.value; var caffeineamount=form.caffein.value; var caffeinetimes=form.caffeintimes.value; var totalcaffeine=caffeineamount*caffeinetimes; // Calculate max caffeine per person var maxcaffeine=userweight*10; // Calculate remaining after 24 hours // Half life = 6 hours var totalcaffeineafter=totalcaffeine(1/16); // Calculating how many hours until the caffeine completely digested var totaldigest=totalcaffeine; var digesttime=0; while (totaldigest>0.05) { totaldigest=totaldigest(1/2); digesttime++; } digesttime=digesttime*6; // Calculating when the user will probably die of overdose var countcaffeine=0; var overdosetime=1; while (countcaffeine<maxcaffeine){ countcaffeine=countcaffeine+totalcaffeine; overdosetime++; } // Show total amount of caffeine document.getElementById("showtotalkafein").innerHTML=totalcaffeine; // Show amount of caffeine after 1 day document.getElementById("showtotalkafeinsetelah").innerHTML=totalcaffeineafter; // Show digest time document.getElementById("showwaktudigest").innerHTML=digesttime; // Show overdose document.getElementById("showberapakali").innerHTML=overdosetime; return false; }  
 Weight
 
 Amount of caffein in coffee
 
 How many times drinking coffee in a day
 
 Calculate
 
Result
 
Show Caffein Total Here
 
Show Caffeine Amount After 24 hours
 
Show Digest TIme Here
 
Show Overdose Time Here 

Answer 1

 function calculateThis(form) { var userweight = parseInt(form.weight.value, 10); var caffeineamount = parseInt(form.caffein.value, 10); var caffeinetimes = parseInt(form.caffeintimes.value, 10); var totalcaffeine = caffeineamount * caffeinetimes; console.log(totalcaffeine) // Calculate max caffeine per person var maxcaffeine = userweight * 10; // Calculate remaining after 24 hours // Half life = 6 hours var totalcaffeineafter = totalcaffeine * (1 / 16); // Calculating how many hours until the caffeine completely digested var totaldigest = totalcaffeine; var digesttime = 0; while (totaldigest > 0.05) { totaldigest = totaldigest * (1 / 2); digesttime++; } digesttime = digesttime * 6; // Calculating when the user will probably die of overdose var countcaffeine = 0; var overdosetime = 1; while (countcaffeine < maxcaffeine) { countcaffeine = countcaffeine + totalcaffeine; overdosetime++; } // Show total amount of caffeine document.getElementById("showtotalkafein").innerHTML = totalcaffeine; // Show amount of caffeine after 1 day document.getElementById("showtotalkafeinsetelah").innerHTML = totalcaffeineafter; // Show digest time document.getElementById("showwaktudigest").innerHTML = digesttime; // Show overdose document.getElementById("showberapakali").innerHTML = overdosetime; return false; } 

DEMO

注意

这里我使用.parseInt()用于将数字转换为整数，如果你需要在Float中使用任何值. parseFloat（）`。

---

代码中的问题

• form.weight.value ， form.caffein.value ...将值作为字符串赋值，因此您需要将它们转换为数字（整数/浮点数）。

• 你使用了totalcaffeine(1 / 16)和totaldigest = totaldigest(1 / 2); ，不是javascript中有效的数学运算，它应该是totalcaffeine * (1 / 16) totaldigest = totaldigest * (1 / 2); totalcaffeine * (1 / 16)和totaldigest = totaldigest * (1 / 2);

---

根据你的评论

什么.parseInt(form.caffeintimes.value, 10) ，做什么？

parseInt格式为：

.parseInt(valueToConvert, [radix]) 。

因此， .parseInt(form.caffeintimes.value, 10)会将form.caffeintimes.value字符串转换为10基整数。

---

相关参考：

.parseInt（）

.parseFloat（）