How to fix Javascript NaN issue? - javascript

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

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

Related

Javascript ID Extracted From String Not Working

Here's the situation:
function STP() { var LOC = window.location.href;
var CSV = LOC.substring(LOC.indexOf(',')+1);
var ARR = CSV.split(',');
var STR = ARR[ARR.length -1 ];
var POS = window.document.getElementById(STR).offsetTop;
alert( STR ); };
Explained:
When the page loads, the onload calls the script.
The script gets the location.href and Extracts the element ID by
creating an array and referencing the last one.
So far so good.
I then use that to reference an element ID to get its position.
But it doesn't work.
The STR alert indicates the proper value when it's placed above POS, not below. The script doesn't work at all below that point when the STR var reference is used.
However if I do a direct reference to the ID ('A01') no problem.
Why does one work and not the other when both values are identical? I've tried other ways like using a hash instead of a comma and can extract the value that with .location.hash, but it doesn't work either.
The problem is that when you do
LOC.substring(LOC.indexOf(',') + 1);
you're putting everything after the , into the CSV variable. But there is a space between the comma and the 'A01'. So, the interpreter reduces it to:
var POS = window.document.getElementById(' A01').offsetTop;
But your ID is 'A01', not ' A01', so the selector fails.
function STP() {
var LOC = 'file:///M:/Transfers/Main%20Desktop/Export/USI/2018/Catalog/CAT-Compilations-01a.htm?1525149288810, A01';
var CSV = LOC.substring(LOC.indexOf(',') + 1);
var ARR = CSV.split(',');
var STR = ARR[ARR.length - 1];
console.log(`'${STR}'`);
}
STP();
To solve this, you can increase the index by one:
LOC.substring(LOC.indexOf(',') + 2);
But it would probably be better not to put spaces in URLs when not necessary - if possible, send the user to 'file:///M:/Transfers/Main%20Desktop/Export/USI/2018/Catalog/CAT-Compilations-01a.htm?1525149288810,A01' instead.

jQuery if condition doesn't return expected result

I am confused why the if condition not producing the result
Return result of fxresult value = " Call for price " this is not code and just for reference of variable result.
var fxresult = $(".price").html();
var fxRate = fxresult.replace(/ /g,"");
if (fxRate == 'Callforprice'){
alert("found")
}
may you use this regexp instead of yours.
var fxRate = fxresult.replace(/\s/g,"");
yours will work to but i think this one is a lil bit better because you avoid typos like one whitespace or two.
and you have a typo here
var fxresult value = " Call for price "
//---------------------------------------^
missing a ;
but your major problem in this line is
var fxresult value = " Call for price "
//----------^
you have a problem with the var declaration (variable names can't contain spaces)
see working FIDDLE

Javascript: Which of these implementations is more efficient/better?

I have an icon that when clicked will increase the value of a number input.
I initially wrote it as:
$('.icon-chevron-up').click(function(){
var input = $(this).next();
var value = eval(input.val());
input.val((value+1).toString());
$(this).next.val(value+1);
});
I then rewrote it as:
$('.icon-chevron-up').click(function(){
$(this).next().val((eval($(this).next().val()) + 1).toString());
});
Is there a preferred way of doing this? And if so, why?
None of those would be the best for efficiency. eval is not needed and if you want performance you should cache your selectors. There are a couple ways you could make it more efficient but I would do it like this:
$('.icon-chevron-up').click(function() {
var $this = $(this),
val = $this.next().val();
$this.next().val( ++val + '' );
});
++ casts val to a number and adds 1. + '' casts the previous number to a string.
If you want something less terse (more readable I guess):
$this.next().val( (parseInt( val,10 ) + 1).toString() );
What do you mean by input? should it be text input or just a html tag?
<button class="icon-chevron-up">Increase</button>
<div id="numinput">12</div>
var input = $('#numinput').html();
$('.icon-chevron-up').click(function(){
input++;
$('#numinput').html(input);
});

jsp- how to assign input value into another variable I would like to use later?

the problem is
when I say:
alert(parseInt(document.frmFuture.txtDays.value) + 7);
(value is number that user input) it shows fine.
but when I say:
var tmp = document.frmFuture.txtDays.value;
alert(tmp + 7);
it gives me undefined.
Actually, I want to do some cals later using the input number. But it looks like impossible? how can i do that?
You forgot the parseInt.
var tmp = parseInt(document.frmFuture.txtDays.value);
alert(tmp + 7);
Now it should work.

Get last string from URL with jQuery

Im trying to get the last string from a URL for example...
http://www.mywebsite/blog/this-post
I want to use jQuery to get 'this-post'
Ive the following...
$('img.gigthumb').each(function(){
var foo = $(this).parent().attr('href').split('/');
$(this).attr('src','/lic/wp-content/uploads/2012/01/'+foo[1]+'.jpg');
})
only it doesn't work and I presume thats because I have multiple '/' within the URL, any idea how to target just the last?
Hope this makes sense!
This is precisely what .pop() is made for:
$('img.gigthumb').each(function(){
var foo = $(this).parent().attr('href').split('/').pop();
$(this).attr('src','/lic/wp-content/uploads/2012/01/' + foo + '.jpg');
});
Don't use the element with index 1 of foo, but the last one:
$(this).attr('src','/lic/wp-content/uploads/2012/01/'+foo[foo.length-1]+'.jpg');
Splitting with "/" will give you the array:
foo[0] = "http:"
foo[1] = ""
foo[2] = "www.mywebsite"
foo[3] = "blog"
foo[4] = "this-post"
If you want to get the last item regardless of the size of the array do:
foo[foo.length - 1]
or as Joseph mentioned: foo.pop()
Following your example you need the last part of the splits:
$('img.gigthumb').each(function(){
var foo = $(this).parent().attr('href').split('/');
var last = foo.length - 1;
$(this).attr('src','/lic/wp-content/uploads/2012/01/'+foo[last]+'.jpg');
})
var foo = $(this).parent().attr('href').replace(/^.*\\/, '');

Categories