My JavaScript computations are not functioning as expected

Question

My JavaScript computations are not functioning as expected

Below is the Javascript code I am using:

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

Given that $corporateA = 89, $corporateB = 6, and $corporateE = 240. If I manually perform the calculations, I expect the following results:

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

However, when I input these values into my quote form on the website, the final result shows as 225 instead of 25. Can anyone help me figure out what went wrong?

javascript bootstrap-4 calculation

Answer 1

Answer №1

To convert the input field value into an integer, use the following code:

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

A helpful tip is to refrain from using the dollar sign with non-jQuery objects.

Correct Method

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

Creating a jQuery Plugin

You can create your own jQuery plugin for a more convenient and concise method.

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

Demonstration in Action

In HTML coding standards, it's recommended to use kebab-case or snake-case for element IDs and classes instead of 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

To convert the input field value into an integer, use the following code:

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

A helpful tip is to refrain from using the dollar sign with non-jQuery objects.

Correct Method

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

Creating a jQuery Plugin

You can create your own jQuery plugin for a more convenient and concise method.

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

Demonstration in Action

In HTML coding standards, it's recommended to use kebab-case or snake-case for element IDs and classes instead of 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 3

Answer №2

To convert the values of the input fields from strings to numbers, you have two main options available.

The first approach is to prepend a unary plus operator to each input field value. The second method involves using the parseInt function.

If you skip the conversion step and attempt arithmetic operations on string values, the binary plus operator will concatenate the strings instead of adding them together.

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

For more in-depth analysis, refer to this link: 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>

Answer 4

To convert the values of the input fields from strings to numbers, you have two main options available.

The first approach is to prepend a unary plus operator to each input field value. The second method involves using the parseInt function.

If you skip the conversion step and attempt arithmetic operations on string values, the binary plus operator will concatenate the strings instead of adding them together.

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

For more in-depth analysis, refer to this link: 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>

My JavaScript computations are not functioning as expected

Answer №1

Correct Method

Creating a jQuery Plugin

Demonstration in Action

Answer №2

Unary plus operator

`parseInt`

Similar questions

Having trouble activating my Nav Toggle button on Bootstrap 4

Setting up Socket.io results in numerous transport polling GET requests being initiated

How can I rectify the varying vulnerabilities that arise from npm installation?

The sidebar.querySelector method is not working as expected

implementing a webpage enhancement that enables loading content asynchronously

"Enhance your web application with dynamic drop-down selection using Spring, Ajax

What is the best way to confirm if a Json response is empty or not?

Sending an Ajax request using a dropdown menu

Preventing window resize from affecting print screen content in Angular 8

Display a specific element only if another element exceeds a specified height

How can I receive user input in JavaScript while incorporating three.js?

Errors are caused when attempting to install third-party JS plugins using npm within a foundation project

How can we retrieve the isolated directive scope variable in the link function of AngularJS?

Spontaneously generating visuals that lead an unpredictable existence

Experiencing issue with React TS when creating a Progress Bar; despite declaring types in the interface, an error is being thrown indicating implicit type 'any'

How do I search for and display a collection associated with another in Mongoose?

Tips for making a Google Map API Element fit perfectly in a Bootstrap column below a heading

An uncaught exception has occurred: An error was encountered indicating that the specified path is not valid for either posix or windows systems, and it appears that there is no 'join' method defined in the

What is the best way to change the date format in the GET API response for all objects

Selecting from dropdown menu showing limited options extracted from XML data