所有价格都不会总结价格，而是将价格放在一起答案

【问题标题】：All price doesn't sum up the prices instead it puts the prices next to each other所有价格都不会总结价格，而是将价格放在一起
【发布时间】：2017-07-22 06:16:58
【问题描述】：

我想总结一些价格并将它们放入所有价格输入中，但该函数不会对数字求和，而是将数字彼此相邻。有没有把字符串改成数字的代码？

 <html>

<label class="fa">ext modeling price</label>
<input type="number"  class="form-control" onchange="allPrc();" id="model-
ext-price" placeholder= "0" ></input>
<br>
<label class="fa">int modeling price</label>
<input type="number"  class="form-control" onchange="allPrc();" id="model-
int-price" placeholder= "0" ></input>   
<hr class="hrline">

<label class="fa"> ext renderign price</label>
<input type="number"  class="form-control" onchange="allPrc();" id="render-
ext-price" placeholder= "0" ></input>
<br>
<label class="fa">int rendering price  </label>
<input type="number"  class="form-control" onchange="allPrc();" id="render-
int-price" placeholder= "0" y></input>
<hr class="hrline">
<label class="fa">pproduction price   </label>
<input type="number"  class="form-control" onchange="allPrc();"  
id="pproduction-price" placeholder= "0" y></input>
<hr class="hrline">
<label class="fa"> All price </label>
<input type="number"  class="form-control"  id="All-price" placeholder= "0" 
readonly></input>
  </html> 


      <script>

    document.getElementById ('model-ext-price').onchange = function() {allPrc();};
    document.getElementById ('model-int-price').onchange = function() {allPrc();};
    document.getElementById ('render-ext-price').onchange = function() {allPrc();};
    document.getElementById ('render-int-price').onchange = function() {allPrc();};
    document.getElementById ('pproduction-price').onchange = function() {allPrc();};





var  allPrc = function () { 
 var Totalextmdl = document.getElementById ('model-ext-price').value,
    Totalintmdl = document.getElementById ('model-int-price').value,
    Totalextrndr = document.getElementById ('render-ext-price').value,
    Totalintrndr = document.getElementById ('render-int-price').value,
    Totalpp = document.getElementById ('pproduction-price').value,
    TotalPrc = 0;

 document.getElementById('All-price').value = TotalPrc;

    var TotalPrc = Totalextmdl + Totalintmdl + Totalextrndr + Totalintrndr + 
 Totalpp;

    document.getElementById('All-price').value = (TotalPrc>0 && 
   TotalPrc!=='NaN')?TotalPrc:0;

};

     </script>

【问题讨论】：

因为JS认为这是一个字符串，所以加号基本上只是连接字符串。您需要将数字解析为浮点数：parseFloat(Totalextmdl = document.getElementById ('model-ext-price').value)

标签： javascript input numbers sum

【解决方案1】：

element.value 返回一个字符串。你想要数字。转换字段值的一种简单方法是在第一次获取它们时使用一元 +，如下所示：

var Totalextmdl = +document.getElementById('model-ext-price').value,
    Totalintmdl = +document.getElementById('model-int-price').value,
    Totalextrndr = +document.getElementById('render-ext-price').value,
    Totalintrndr = +document.getElementById('render-int-price').value,
    Totalpp = +document.getElementById('pproduction-price').value,
    TotalPrc = 0;

【讨论】：

【解决方案2】：

有可能在var TotalPrc = Totalextmdl + Totalintmdl + Totalextrndr + Totalintrndr + Totalpp; 语句中，Totalextmdl、Totalintmdl、Totalextrndr、Totalpp 值被读取为字符串。

您可以通过在这些变量前面加上+ 符号将它们的值转换为数字：

var TotalPrc = (+Totalextmdl) + (+Totalintmdl) + (+Totalextrndr) + (+Totalintrndr) + (+Totalpp);

【讨论】：

【解决方案3】：

我认为您正在寻找 parseInt 或 parseFloat（取决于您是否有整数）

例如：parseInt(document.getElementById ('model-ext-price').value) 或 parseFloat(document.getElementById ('model-ext-price').value)

这可确保您返回的是数字而不是字符串。如果 parseInt（或 parseFloat）失败，可能需要编写其他逻辑来执行某些操作。

https://www.w3schools.com/jsref/jsref_parseint.asp https://www.w3schools.com/jsref/jsref_parsefloat.asp

【讨论】：

【解决方案4】：

将您的字符串值转换为数字：

var allPrc = function () { 
var ids =['model-ext-price','model-int-price',
    'render-ext-price', 'render-int-price', 'pproduction-price'];

var TotalPrice = 0;
ids.forEach(funciton(id) {
        totalPrice+=Number(document.getElementById(id).value;
    });
return TotalPrice;
}

document.getElementById('All-price').value = allPrc;

【讨论】：