My Javascript calculations are not working as planned

Question

Here is my Javascript code:

$(".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;
})

So $corporateA = 89, $corporateB = 6 and $corporateE = 240. If I do the calculations on paper, I'll should get something like this:

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

But once I enter my values into my quote (on my website) I keep getting 225 as my final result... Can someone explain me what did I do wrong?

Answer 1

You need to parse the input field value to an integer:

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

Also, as a tip, avoid prefixing the dollar-sign to non-jQuery objects.

Proper usage

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

---

As a jQuery plugin

You could also write your own jQuery plugin, to make the call convenient and succinct.

(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();

---

Working demo

HTML conventions dictate that element IDs and classes should be kebab-case or snake-case, rather than lower camel-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

You need to parse the values of the input fields, which are of type string into numbers.

There are two main strategies to achieve that. 1. Prefix every input field with a unary plus operator 2. Parse with the parseInt function

If you fail to parse the string into numbers, the binary plus operator will do string concatenation instead of addition

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

See here for more details: parseInt vs unary plus, when to use which?

Unary plus operator

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