我的 Javascript 计算没有按计划进行

Question

这是我的 Javascript 代码：

$(".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 vs unary plus, when to use which?

一元加运算符

"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>

我的 Javascript 计算没有按计划进行

My Javascript calculations are not working as planned

javascript

bootstrap-4

calculation

正确使用

作为 jQuery 插件

工作演示

一元加运算符

`parseInt`