Help using Arithmetic Operators [Solved]

[computerbarry]

Hi all

I’m trying to build a simply load more function, works ok, on and off though just not sure what’s happening below. The numbers aren’t matching up causing no results, or showing all results:

What is actually happening here?
x = (x+5 <= size_col) ? x+5 : size_col;

When I alert x as show below it returns [object Object]?

size_col = $("div.column__4"); // 10
x=2;
  
$('#results .column__4:lt('+x+')').addClass('show'); // shows the first 2 items
  
$(document).on('click', '#loadMore', function(e){
    x = (x+5 <= size_col) ? x+5 : size_col;
    
    alert(x); //object object

    $('#results .column__4:lt('+x+')').addClass('show');
    e.preventDefault();
});

My end goal is to load the items by 2 each time the button is clicked, and when no results are left - hide the load more button.
Any ideas what’s going on here and how I can accomplish my end goal?

For reference: The below loops through an ajax call displaying multiple div containers.

<div id="results">
  <div class="column__4">
    <p>{{name}}</p>
  </div>
</div>
<button id="loadMore">Load more</button>

I’m also curious if I should be using var x instead of just x ?
Is this a concern?

Thanks

[m3g4p0p]

@computerbarry

When I alert x as show below it returns [object Object]?

That is because size_col is an object (namely, a jQuery collection), and a number is not less or equal than an object; so you’re assigning size_col to x, which now points to the same jQuery collection. Did you maybe mean something like

var size_col = $('div.column__4').length

? That would give you the number of items in that collection.

BTW I’d suggest to use the console (or better yet breakpoints) for debugging rather than alert()s; this will give you much better information. By alert()ing a value you’re coercing it to a string, and in case of an object you just get, well, [object Object] (unless it implements its own .toString() method).

@computerbarry

I’m also curious if I should be using var x instead of just x ?

Definitively. Otherwise you’re implicitly creating a global variable x, and in strict mode it will actually throw a reference error.

[computerbarry]

@m3g4p0p

var size_col = $(‘div.column__4’).length

That has fixed it, working great
I must of changed something and not realised, good catch!

@m3g4p0p

BTW I’d suggest to use the console (or better yet breakpoints) for debugging rather than alert()s; this will give you much better information.

I’ve been using JS/jQuery on and off for awhile just little functions and stuff, still a novice really so haven’t digged into the heavy debugging. I’ve just googled what you mention, I’ll look into this try and get a better understand, thanks.

@m3g4p0p

Definitively. Otherwise you’re implicitly creating a global variable x, and in strict mode it will actually throw a reference error.

Cool, a lot to learn

Ok, things are looking good up to now, just one last issue for the time being @m3g4p0p

How do I hide the load more button when no more items/results are left, nothing left to show?

My codepen if you want a look (updated with the above): codepen

Thanks, Barry

[computerbarry]

I’ve managed to fix the hide button issue:

if(x >= size_col){
      $( "#loadMore" ).hide();
    }

Then added to the on click function

$(document).on('click', '#loadMore', function(e){
    x = (x+2 <= size_col) ? x+2 : size_col;
  
    //alert(x);
    $('#results .column__4:lt('+x+')').addClass('show');
    e.preventDefault();
  
    if(x >= size_col){
      $( "#loadMore" ).hide();
    }
  
  });

Barry