Javascript在将数字相加时删除小数答案

【问题标题】：Javascript removes the decimals when adding numbers togetherJavascript在将数字相加时删除小数
【发布时间】：2019-01-10 16:50:52
【问题描述】：

我有一个将 4 个数字相加的脚本，但 JS 不考虑原始小数位。

// 初始输入表单

<form class="weight_form" data-ajax="false" method="post">
<input type="text" class="input_save" placeholder="save as.."/>
<input type="text" id="lf" placeholder="enter LF lbs" value="" onkeyup="myFunction()"/>
<input type="text" id="rf" placeholder="enter RF lbs" value="" onkeyup="myFunction()"/>
<input type="text" id="lr" placeholder="enter LR lbs" value="" onkeyup="myFunction()"/>
<input type="text" id="rr" placeholder="enter RR lbs" value="" onkeyup="myFunction()"/>
<input type="submit" id="sub_save" value="save"/>

//显示结果的部分

<div id="bottom_section">
    <input type="text" id="total"  value=""/>
    <input type="text" id="cross"  value=""/>
    <input type="text" id="ls"  value=""/>
    <input type="text" id="bite"  value=""/>    
</div>

// 动态执行动作的 JS 脚本

<script>
function myFunction() {
var lf = document.getElementById("lf");
var rf = document.getElementById("rf");
var lr = document.getElementById("lr");
var rr = document.getElementById("rr");

var lf = parseInt(lf.value);
var rf = parseInt(rf.value);
var lr = parseInt(lr.value);
var rr = parseInt(rr.value);

  var lf_1 = lf*1;
  var rf_1 = rf*1;
  var lr_1 = lr*1;
  var rr_1 = rr*1;

  var total = lf_1 + rf_1 + lr_1 + rr_1;
  var cross = rf_1 + lr_1 / total;
  var ls = lf_1 + lr_1 / total;
  var bite = lr_1 - rr_1;


$('#total').val(total);
$('#cross').val(Math.round(cross));
$('#ls').val(Math.round(ls));
$('#bite').val(bite);
};
</script>

如果我为“weight_form”（lf、rf、lr、rr）中的每个输入输入 20.5，则总数为 80 而不是 82。为什么它似乎总是向下取整？

【问题讨论】：

您使用parseInt 而不是parseFloat。 parseInt 返回一个整数。
是的，就是这样。谢谢队友将其添加为答案，这样我就可以排除它了。。
归咎于使用了错误的方法......而不是语言。当有疑问时，首先研究使用的方法
parseInt 只是截断点后的数字
@RyanD 我可以建议您对变量使用更好的命名约定吗？如果我正在为您审查此代码，那将是我制作的第一批 cmets 之一

标签： javascript integer decimal rounding

【解决方案1】：

要在您的表单中处理浮点数，在从input 元素解析您的值时，请使用parseFloat 而不是parseInt。

由于您使用的是 jQuery，您可以通过选择字段并在一行中解析它们的值来简化 myFunction：

var lf = parseFloat($("#lf").val());
var rf = parseFloat($("#rf").val());
var lr = parseFloat($("#lr").val());
var rr = parseFloat($("#rr").val());

示例：

function myFunction() {
  var lf = parseFloat($("#lf").val());
  var rf = parseFloat($("#rf").val());
  var lr = parseFloat($("#lr").val());
  var rr = parseFloat($("#rr").val());

  var lf_1 = lf * 1;
  var rf_1 = rf * 1;
  var lr_1 = lr * 1;
  var rr_1 = rr * 1;

  var total = lf_1 + rf_1 + lr_1 + rr_1;
  var cross = rf_1 + lr_1 / total;
  var ls = lf_1 + lr_1 / total;
  var bite = lr_1 - rr_1;

  $('#total').val(total);
  $('#cross').val(Math.round(cross));
  $('#ls').val(Math.round(ls));
  $('#bite').val(bite);
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form class="weight_form" data-ajax="false" method="post">
  <input type="text" class="input_save" placeholder="save as.." />
  <input type="text" id="lf" placeholder="enter LF lbs" value="" onkeyup="myFunction()" />
  <input type="text" id="rf" placeholder="enter RF lbs" value="" onkeyup="myFunction()" />
  <input type="text" id="lr" placeholder="enter LR lbs" value="" onkeyup="myFunction()" />
  <input type="text" id="rr" placeholder="enter RR lbs" value="" onkeyup="myFunction()" />
  <input type="submit" id="sub_save" value="save" />
  <div id="bottom_section">
    <input type="text" id="total" value="" />
    <input type="text" id="cross" value="" />
    <input type="text" id="ls" value="" />
    <input type="text" id="bite" value="" />
  </div>
</form>

【讨论】：