当将数字相加时,JavaScript会删除小数

时间:2018-08-02 20:29:27

标签: javascript integer decimal rounding

我有这个脚本将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。为什么它似乎总是舍入该值?

1 个答案:

答案 0 :(得分:2)

要处理表单中的 floats ,在解析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>