Question 11187 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

The calculation result always a 'NaN' – Jquery

let z = document.getElementById('id_z')
let x = document.getElementById('id_x')
let y = document.getElementById('id_y')


$("#id_a, #id_b, #id_c, #id_d, #id_e").keyup(function () {
    let a = $('#id_a').val()
    let b = $('#id_b').val()
    let c = $('#id_c').val()
    let d = $('#id_d').val()
    let e = $('#id_e').val()
    
    z.value = ((c * 3.175) / a).toFixed(0)
    x.value = (b*e)+(d*(e - 1))+15
    
    // y variable throws the error
    y.value = ((c*3.175) - (a * z))/z
   
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label>Value A:</label>
<input type="number" class="numberinput form-control" required="" id="id_a">

<label>Value B:</label>
<input type="number" class="numberinput form-control" required="" id="id_b">

<label>Value C:</label>
<input type="number" class="numberinput form-control" required="" id="id_c">

<label>Value D:</label>
<input type="number" class="numberinput form-control" required="" id="id_d">

<label>Value E:</label>
<input type="number" class="numberinput form-control" required="" id="id_e">

<div>
<label>Value Z:</label>
<input type="number" class="numberinput form-control" required="" id="id_z">

<label>Value x:</label>
<input type="number" class="numberinput form-control" required="" id="id_x">

<label>Value Y:</label>
<input type="number" class="numberinput form-control" required="" id="id_y">
</div>

I am creating a calculation process using JavaScript based on what the user input and delivering the result. When I try to put a number in "gear", it shows the error in the console "specified value cannot be parsed or is out of range".

const z = document.getElementById('id_z')
const x = document.getElementById('id_x')
const y = document.getElementById('id_y')


$("#id_c, #id_d, #id_e, #id_a, #id_b").keyup(function () {
    const a = $('#id_a').val()
    const b = $('#id_b').val()
    const c = $('#id_c').val()
    const d = $('#id_d').val()
    const e = $('#id_e').val()
    
    z.value = ((c * 3.175) / a).toFixed(0)
    x.value = (a*e)+(d*(e - 1)+15)
    
    // y variable throws the error
    y = ((c*3.175) - (a * z))/z
    
    console.log(y)
    console.log(typeof(y))
});

For z and x looks fine but the calculation result for X always throws NaN. I need some advice on this problem, Thank you.

Tags:

2

Answers


  1. 0

    a) .val() provides value in string format so you have to convert it into numbers. So use parseFloat.

    b) Instead of using constant use var or let as the constant value cannot be changed each time the different input values change.

    c) As x,y,z are DOM elements so you can not use them directly in your calculation. You need to change your code like below.

    Working snippet:

    var z = document.getElementById('id_z')
var x = document.getElementById('id_x')
var y = document.getElementById('id_y')

$("#id_c, #id_d, #id_e, #id_a, #id_b").keyup(function() {
  var a = parseFloat($('#id_a').val()) || 0;
  var b = parseFloat($('#id_b').val()) || 0;
  var c = parseFloat($('#id_c').val()) || 0;
  var d = parseFloat($('#id_d').val()) || 0;
  var e = parseFloat($('#id_e').val()) || 0;

  var first = ((c * 3.175) / a).toFixed(0);
  var second = (a * e) + (d * (e - 1) + 15);
  var third = ((c * 3.175) - (a * first)) / first;

  z.value = first;
  x.value = second;
  y.value = !isNaN(third) ? third : 0;
});
    input[type="text"]
{
  width:90%;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<br>
id_a<input type="text" id="id_a">
<br> id_b
<input type="text" id="id_b">
<br> id_c
<input type="text" id="id_c">
<br> id_d
<input type="text" id="id_d">
<br> id_e
<input type="text" id="id_e">
<br> id_x

<input type="text" id="id_x">
<br> id_y

<input type="text" id="id_y">
<br> id_z
<input type="text" id="id_z">
<br>
    Login or Signup to reply.
  2. 0

    Just do parseFloat() in javascript to prevent this.
    Below is the code for your problem:

    let a = parseFloat($('#id_a').val());
let b = parseFloat($('#id_b').val());
let c = parseFloat($('#id_c').val());
let d = parseFloat($('#id_d').val());
let e = parseFloat($('#id_e').val());

    Hope this work for you.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search