jQuery "null" when assign a value

Question

When I run this code:

$( document ).ready(function() {
    $altura = $('.slb_container').height();
    console.log($altura);        
});

I get "null" on the console. But when I run $('.slb_container').height(); directly in the console I get an integer value.

What am I doing wrong?

Answer 1

You are trying to get the property of an array. This is happening because you're getting all elements with the class of .slb_container.

You have 2 easy options:

1. Use a unique ID in your HTML to identify your element
   

   $( document ).ready(function() {    
      $altura = $('#slb_container_id').height();
      console.log($altura);        
   });
   

2. Index into your class array with $('.slb_container')[i] and then wrap it in $() to objectify it as a jQuery object.

   $( document ).ready(function() {    
      $altura = $($('.slb_container')[0]).height();
      console.log($altura);        
   });
   

Answer 2

Do you have only one element on your html with this class? I am not sure, but I think this is what happened. You are trying to get a height of something that is an array and not an element. Try to put a unique ID instead