html - jQuery variable globally defined but logging as undefined -

i making product image viewer similar on sites amazon (you hover on image, appears larger -- click image thumbnail , sets main image clicked).

background info aside, set 2 global variables outside functions control main image. strange happening variables defined point in code execution, become "undefined".

here markup:

<div id="product-image-gallery">    <div id="product-image-holder" style="background-image: url('http://example.com/images/main-image.jpg');">my main image    </div>     <ul>      <li class="product-thumb">        <img src="http://example.com/images/image-1.jpg"/>      </li>      <li class="product-thumb">        <img src="http://example.com/images/image-2.jpg"/>      </li>    </ul> </div> 

in jquery, storing original image , image background path in 2 global variables, defining functions alter main image container show proper image. here jquery:

var $originalimage = $('#product-image-holder'); var $originalimagesrc = $originalimage.css('background-image');  $('#product-image-gallery ul li.product-thumb').click(function () {     $('li.product-thumb.active').removeclass('active');     $(this).addclass('active'); });  $('#product-image-gallery ul li.product-thumb').hover( //mouseenter event     function () {         var $imagechange = $(this).find('img');         var $imagechangesrc = 'url(\'' + $imagechange.attr('src') + '\')';         $originalimage.css("background-image", $imagechangesrc); }, //mouseleave event function () {     var $activeimage = $('#product-image-gallery ul li.product-thumb.active img');     var $activeimagesrc = 'url(\'' + $activeimage.attr('src') + '\')';      if($(this).hasclass('active')){         return;     }     else if ($activeimage != '') {         $originalimage.css("background-image", $activeimagesrc);     }     else {         $originalimage.css("background-image", $originalimagesrc);     } }); 

when view page, works expected on mouse hover, except original image path resets undefined (i can witness behavior in console). stumped cause happen.

any suggestion make variable unset appreciated.

[edit] here jsfiddle example, showing exact same behavior: https://jsfiddle.net/htxxnfuy/

you checking possible collection of elements against empty string. when trying find out if jquery selector returns item (or many), can test it's length property.

i've reduced code bit:

$(function () {     // make code bit easier understand, use $ prefix     // variables represent jquery selector.     var $originalimage = $('#product-image-holder');     var originalimagesrc = $originalimage.css('background-image');     var containerselector = '#product-image-gallery ul li.product-thumb';     var $container = $(containerselector);      // can attach many event handlers need in     // 1 go. also, it's better use mouseenter , mouseleave     // instead of hover.     $container.on({ click: function () {             $('li.product-thumb.active').removeclass('active');              $(this).addclass('active');     }, mouseenter: function () {         var $imagechange = $(this).find('img');         var imagechangesrc = 'url(\'' + $imagechange.attr('src') + '\')';          $originalimage.css('background-image', imagechangesrc);     }, mouseleave: function () {         var $activeimage = $(containerselector + '.active img');         var activeimagesrc = 'url(\'' + $activeimage.attr('src') + '\')';          // review necessity of entire check.         if ($(this).hasclass('active')) {                     } else if ($activeimage.length > 0) {              // if there's @ least 1 element coming             // selector above.                        $originalimage.css('background-image', activeimagesrc);         } else {                        $originalimage.css('background-image', originalimagesrc);          }     }}); }); 

demo