jquery - How to fix Javascript NaN issue? - Stack Overflow

Here is my code

  var total_center_buttons=$('.center_button').length;
  var center_button_height=$('.center_button:first-child').height();
  var total_center_button_height=total_center_buttons + center_button_height;
  alert(total_center_button_height);

Here total_center_button value =3 and center_button_height is 40 while alerting them separately.It returns NaN. I tried ParseInt also but result is same.Please suggest me the solution.

Thanks in advance.
Krishna

Here is my code

  var total_center_buttons=$('.center_button').length;
  var center_button_height=$('.center_button:first-child').height();
  var total_center_button_height=total_center_buttons + center_button_height;
  alert(total_center_button_height);

Here total_center_button value =3 and center_button_height is 40 while alerting them separately.It returns NaN. I tried ParseInt also but result is same.Please suggest me the solution.

Thanks in advance.
Krishna

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Dec 10, 2013 at 7:31 Krishna Karki asked Dec 10, 2013 at 7:25 Krishna KarkiKrishna Karki 1,32244 gold badges1414 silver badges3232 bronze badges 5

• Check isNaN(123) it will return true or false then you can do further – Just code Commented Dec 10, 2013 at 7:27
• you try adding undefined to int – Grundy Commented Dec 10, 2013 at 7:27
• Where is total_center_button_height ??? – Nimmi Commented Dec 10, 2013 at 7:28
• do you mean total_center_buttons instead of total_center_button_height in center_button_height + total_center_button_height? – Grundy Commented Dec 10, 2013 at 7:31
• yes i just edited the question. – Krishna Karki Commented Dec 10, 2013 at 7:32

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 3

We have to guess, since you haven't quoted the DOM, but my guess is that $('.center_button:first-child') doesn't match any elements. Calling height() on an empty set returns undefined. When you try to add it to the number from the previous line, you get NaN.

I suspect you didn't want :first-child, but rather

var center_button_height=$('.center_button').first().height();

...but again without seeing the DOM, it's hard to say. To avoid repeated DOM lookups, you'd do this:

var buttons = $('.center_button');
var total_center_buttons = buttons.length;
var center_button_height = buttons.first().height();
var total_center_button_height = total_center_buttons + center_button_height;
alert(total_center_button_height);

.center_button:first-child will only match an element that both has the class center_button and is the first child of its parent element. My suggestion above is based on the assumption that you really wanted the first of the buttons, and that the buttons aren't the first thing in their parent.

Finally: That + in

var total_center_button_height = total_center_buttons + center_button_height;

looks suspicious. Again without seeing the markup it's hard to say, but you may have meant * there.

Mate, there's a typo in your post. Notice the code line where you assign the value to total_center_button_height

var total_center_button_height = center_button_height + total_center_button_height;

That's where the problem is, the variable to the right of the addition operation (total_center_button_height) does not exist yet. Replace that line with...

var total_center_button_height = center_button_height + total_center_buttons;

Pretty straight forward

Hope it helps

Leo

may be you need to write this

var total_center_button_height=center_button_height + total_center_buttons;
  alert(total_center_button_height);

you can check for "isNaN" function, this is to check whether the parameter is number or not.

Try this:

$(function(){
      var total_center_buttons = $('.center_button').length > 0 ? $('.center_button').length : 0;
      if(total_center_buttons !=0){
         var center_button_height=$('.center_button:first-child').height();
         var total_center_button_height = center_button_height + total_center_button_height;
         alert(total_center_button_height);
      }
});

you are doing this:

var total_center_button_height=center_button_height + total_center_button_height;

i.e. total_center_button_height is used in the same line where it is declared. At this time it is undefined.

i guess, you should be doing:

var total_center_button_height=center_button_height + total_center_buttons;

Try something like this:

var total_center_buttons=$('.center_button').length;
if (typeof total_center_buttons != 'undefined') { 
  var center_button_height=$('.center_button:first-child').height();
  var total_center_button_height=total_center_buttons + center_button_height;
  alert(total_center_button_height);
}