我的Javascript计算不能按计划进行

Question

这是我的Javascript代码，如果我在纸上计算，我应该得到这样的结果：$corporateA=89，$corporateB=6，$corporateE=240。

$(".myCorOpt").change(function () {
    var $corporateA = $("#corporateA").val();
    var $corporateB = $("#corporateB").val();
    var $corporateE = $("#corporateE").val();

    var $corElevators = Math.ceil($corporateE * ($corporateA + + $corporateB) / 1000);
    var $corColumns = Math.ceil(($corporateA + + $corporateB) / 20);
    var $elevatorsPerColumnsCor = Math.ceil($corElevators / $corColumns);
    var $corTotalElevators = $elevatorsPerColumnsCor * $corColumns;
})

所以$corporateA = 89, $corporateB = 6 和 $corporateE = 240.如果我在纸上计算，我应该得到这样的结果。

Math.ceil(240(89+6)/1000) = 23
Math.ceil((89+6)/20) = 5
Math.ceil(23/5)=5
$corTotalElevators = 5*5=25

但是一旦我把我的数值输入到我的报价中（在我的网站上） 我一直得到225的最终结果... ... 谁能解释一下我做错了什么？

Answer 1

你需要把输入字段的值解析成一个整数。

parseInt($('#corporateA').val(), 10) // 89 (integer)

另外，作为一个小贴士，避免在非jQuery对象前加上美元符号。

正确使用

let $corporateA = $('#corporateA'); // Storing a jQuery DOM object
let valA = parseInt($corporateA.val(), 10);

---

作为一个jQuery插件

你也可以自己写一个jQuery插件，让调用更加方便简洁。

(function($) {
  $.fn.intVal = function(radix) {
    return parseInt(this.val(), radix || 10);
  };
})(jQuery);

let corporateA = $('#corporate-a').intVal();
let corporateB = $('#corporate-b').intVal();
let corporateE = $('#corporate-e').intVal();

---

工作演示

HTML惯例规定，元素ID和类应该是Kebab-case或snake-case，而不是小骆驼大写。

$('.my-cor-opt').change(function(e) {
  let corporateA = parseInt($('#corporate-a').val(), 10);
  let corporateB = parseInt($('#corporate-b').val(), 10);
  let corporateE = parseInt($('#corporate-e').val(), 10);
  
  let corElevators = Math.ceil(corporateE * (corporateA + corporateB) / 1000);
  let corColumns = Math.ceil((corporateA + corporateB) / 20);
  let elevatorsPerColumnsCor = Math.ceil(corElevators / corColumns);
  let corTotalElevators = elevatorsPerColumnsCor * corColumns;

  alert(corTotalElevators); // 25
});

$('.my-cor-opt').trigger('change');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="corporate-a" value="89" />
<input id="corporate-b" value="6" />
<input id="corporate-e" value="240" />
<select class="my-cor-opt"></select>

Answer 2

你需要将输入字段的值解析成数字，这些字段的类型是字符串。

有两种主要策略可以实现这一点.1. 在每个输入字段前加上单利加运算符2。用 parseInt 功能

如果你未能将字符串解析成数字，二进制的 plus 操作符将进行字符串连接而不是加法运算

'1' + '2' + '3' // '123'
1 + 2 + 3 // 6
+'1' + +'2' + +'3' // 6
parseInt('1', 10) + parseInt('2', 10) + parseInt('3', 10) // 6

详见这里。parseInt与单利加号，什么时候用哪个？

单数加运算符

"use strict";
console.clear();

$(".myCorOpt").change(function () {
  var $corporateA = +$("#corporateA").val();
  var $corporateB = +$("#corporateB").val();
  var $corporateE = +$("#corporateE").val();

  var $corElevators = Math.ceil(
    ($corporateE * ($corporateA + $corporateB)) / 1000
  );
  var $corColumns = Math.ceil(($corporateA + $corporateB) / 20);
  var $elevatorsPerColumnsCor = Math.ceil($corElevators / $corColumns);
  var $corTotalElevators = $elevatorsPerColumnsCor * $corColumns;

  $('#corElevators').val($corElevators);
  $('#corColumns').val($corColumns);
  $('#elevatorsPerColumnsCor').val($elevatorsPerColumnsCor);
  $('#corTotalElevators').val($corTotalElevators);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="myCorOpt">
  <table>
  <tr><td>Corporate A</td><td><input id="corporateA" placeholder="corporateA" value="89"></td></tr>
  <tr><td>Corporate B</td><td><input id="corporateB" placeholder="corporateB" value="6"></td></tr>
  <tr><td>Corporate E</td><td><input id="corporateE" placeholder="corporateE"></td></tr>
  <tr><td colspan="2"><hr></td></tr>
  <tr><td>Elevators</td><td><input id="corElevators"></td></tr>
  <tr><td>Columns</td><td><input id="corColumns"></td></tr>
  <tr><td>Elevators per Columns</td><td><input id="elevatorsPerColumnsCor"></td></tr>
  <tr><td>Total Elevators</td><td><input id="corTotalElevators"></td></tr>
</form>

parseInt

"use strict";
console.clear();

$(".myCorOpt").change(function () {
  var $corporateA = parseInt($("#corporateA").val(), 10);
  var $corporateB = parseInt($("#corporateB").val(), 10);
  var $corporateE = parseInt($("#corporateE").val(), 10);

  var $corElevators = Math.ceil(
    ($corporateE * ($corporateA + $corporateB)) / 1000
  );
  var $corColumns = Math.ceil(($corporateA + $corporateB) / 20);
  var $elevatorsPerColumnsCor = Math.ceil($corElevators / $corColumns);
  var $corTotalElevators = $elevatorsPerColumnsCor * $corColumns;

  $('#corElevators').val($corElevators);
  $('#corColumns').val($corColumns);
  $('#elevatorsPerColumnsCor').val($elevatorsPerColumnsCor);
  $('#corTotalElevators').val($corTotalElevators);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="myCorOpt">
  <table>
  <tr><td>Corporate A</td><td><input id="corporateA" placeholder="corporateA" value="89"></td></tr>
  <tr><td>Corporate B</td><td><input id="corporateB" placeholder="corporateB" value="6"></td></tr>
  <tr><td>Corporate E</td><td><input id="corporateE" placeholder="corporateE"></td></tr>
  <tr><td colspan="2"><hr></td></tr>
  <tr><td>Elevators</td><td><input id="corElevators"></td></tr>
  <tr><td>Columns</td><td><input id="corColumns"></td></tr>
  <tr><td>Elevators per Columns</td><td><input id="elevatorsPerColumnsCor"></td></tr>
  <tr><td>Total Elevators</td><td><input id="corTotalElevators"></td></tr>
</form>