使用javascript从表单，计算和更新html内容中获取数值 [英] Get number value from form, calculation, and updating html content with javascript

问题描述

我试图在HTML和javascript
中制作一个非常简单的计算器，但它仍然无效

我的问题是：

1.如何从表单中获取价值并将其设置为数字而不是字符串？

2.如何在javascript中执行二次计算？
3.如何使用javascript更新html内容？所以无论何时我改变输入表单的值并按下提交，结果都会根据我输入的内容而改变，我试过了 document.getElementById（idhere）。innerHTML = valuehere; 但仍不起作用。

 < script tyle =text / javascript> 
函数calculateThis（form）{
 var userweight = form.weight.value; 
 var caffeineamount = form.caffein.value; 
 var caffeinetimes = form.caffeintimes.value; 
 var totalcaffeine = caffeineamount * caffeinetimes; 
 
 //计算每人最高咖啡因数
 var maxcaffeine = userweight * 10; 
 
 //计算24小时后的剩余金额
 //半条命= 6小时
 var totalcaffeineafter = totalcaffeine（1/16）; 
 
 //计算咖啡因完全消化之前多少小时
 var totaldigest = totalcaffeine; 
 var digesttime = 0; 
 
 while（totaldigest> 0.05）{
 totaldigest = totaldigest（1/2）; 
 digesttime ++; 
} 
 
 digesttime = digesttime * 6; 
 
 //计算用户何时可能死于过量
 var countcaffeine = 0; 
 var overdosetime = 1; 
 
 while（countcaffeine  countcaffeine = countcaffeine + totalcaffeine; 
过量时间++; 
} 
 
 //显示咖啡因总量
 document.getElementById（showtotalkafein）。innerHTML = totalcaffeine; 
 
 //在1天后显示咖啡因的含量
 document.getElementById（showtotalkafeinsetelah）。innerHTML = totalcaffeineafter; 
 
 //显示摘要时间
 document.getElementById（showwaktudigest）。innerHTML = digesttime; 
 
 //显示过量
 document.getElementById（showberapakali）。innerHTML = overdosetime; 
 
返回false; 
} 
< / script> 
 
< form class =form> 
重量< br /> 
< input type =textname =weightclass =requiredvalue =/>< p /> 
咖啡中咖啡因的含量< br /> 
< input type =textname =caffeinclass =requiredvalue =/>< p /> 
一天喝多少次咖啡< br /> 
< input type =textname =caffeintimesclass =requiredvalue =/>< p /> 
 
< button type =buttononclick =calculateThis（this.form）; return false;>计算< / button>< / form> 
 
< h1>结果< / h1> 
< p id =showtotalkafein>在此显示咖啡因总数< / p> 
< p id =showtotalkafeinsetelah>显示24小时后的咖啡因量< / p> 
< p id =showwaktudigest>显示摘要TIme Here< / p> 
< p id =showberapakali>显示过量时间在这里< / p> 
  

解决方案

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）
//计算每人最大咖啡因量
var maxcaffeine = userweight * 10;

//计算24小时后的剩余金额
//半条命= 6小时
var totalcaffeineafter = totalcaffeine *（1/16）;

//计算咖啡因完全消化之前多少小时
var totaldigest = totalcaffeine;
var digesttime = 0;

while（totaldigest> 0.05）{
totaldigest = totaldigest *（1/2）;
digesttime ++;
}

digesttime = digesttime * 6;

//计算用户何时可能死于过量
var countcaffeine = 0;
var overdosetime = 1;

while（countcaffeine countcaffeine = countcaffeine + totalcaffeine;
过量时间++;
}

//显示咖啡因总量
document.getElementById（showtotalkafein）。innerHTML = totalcaffeine;

//在1天后显示咖啡因的含量
document.getElementById（showtotalkafeinsetelah）。innerHTML = totalcaffeineafter;

//显示摘要时间
document.getElementById（showwaktudigest）。innerHTML = digesttime;

//显示过量
document.getElementById（showberapakali）。innerHTML = overdosetime;

返回false;
}

DEMO

注意

在这里，我使用了 .parseInt（），用于将数字转换为整数，如果需要Float中的任何值，则使用。

---

代码中的问题

• form.weight.value ， form.caffein.value ...以字符串的形式给出值，所以你需要将它们转换为数字（整数/浮点数）。 使用 totalcaffeine（ 1/16）和 totaldigest = totaldigest（1/2）; ，在javascript中不是有效的数学运算，它应该是 totalcaffeine *（1/16）和 totaldigest = totaldigest *（1/2）;







根据你的评论





什么 .parseInt（form.caffeintimes.value，10），do？





格式 parseInt 是：





.parseInt（valueToConvert，[radix]）。 $ b

因此， .parseInt（form.caffeintimes.value，10）会转换表单.caffeintimes.value 字符串到一个10个整数。





---





相关文献：





.parseInt（ ）





。parseFloat（）




I'm trying to make a very simple calculator in HTML and javascript But it still does not work

My question are:
1. How do I get value from a form and set it as a number, not a string?
2. How do I perform quadratic calculation in javascript?
3. How do I update html content with javascript? So whenever I change the value of the input form and press submit, the result will change based on the input that I type, I've tried the document.getElementById("idhere").innerHTML=valuehere; but still does not work.

<script tyle="text/javascript">
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;
}
</script>

<form class="form">
Weight<br />  
<input type="text" name="weight" class="required" value="" /><p /> 
Amount of caffein in coffee<br />
<input type="text" name="caffein" class="required" value="" /><p /> 
How many times drinking coffee in a day<br /> 
<input type="text" name="caffeintimes" class="required" value="" /><p />

<button type="button" onclick="calculateThis(this.form); return false;">Calculate</button></form>

<h1>Result</h1>
<p id="showtotalkafein">Show Caffein Total Here</p> 
<p id="showtotalkafeinsetelah">Show Caffeine Amount After 24 hours</p> 
<p id="showwaktudigest">Show Digest TIme Here</p> 
<p id="showberapakali">Show Overdose Time Here</p>

解决方案

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

Note

Here I used .parseInt() which used to convert a number to integer, if you need any value in Float then use .parseFloat()`.

---

Problems in your code

• form.weight.value, form.caffein.value ... give value as string, so you need to convert them to number (integer/ float).

• you used totalcaffeine(1 / 16) and totaldigest = totaldigest(1 / 2);, not a valid Math operation in javascript, it should be totalcaffeine * (1 / 16) and totaldigest = totaldigest * (1 / 2);

---

According to your comment

What .parseInt(form.caffeintimes.value, 10), do?

Format of parseInt is:

.parseInt(valueToConvert, [radix]).

So, .parseInt(form.caffeintimes.value, 10) will convert form.caffeintimes.value string to a 10-base integer.

---

Related refs:

.parseInt()

.parseFloat()

这篇关于使用javascript从表单，计算和更新html内容中获取数值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！