Jquery variable(inside click function) is not showing globally

Question

Hope you are doing right. I have a simple code to increase or decrease star ratings & finally stores the result as a variable. But I can not access the variable outside the click function. I have declared the variable outside the click function. But I am getting the result undefined. I am not getting the $ratingCount outside of the click function. My code goes like below:

$(document).ready(function(){
        let $finalRating;
         let $ratingCount; 
//if user wants to increase rating   
        $('.rating-link').on('click', function(){           
            $(this).children('.rating').addClass('fas');
            $(this).children('.rating').removeClass('far');
            $(this).parent('li').prevAll().find('.rating').addClass('fas');
            $(this).parent('li').prevAll().find('.rating').removeClass('far');
//if user wants to lower rating
            $(this).parent('li').prevAll().children('.rating-link').on('click', function(){ 
                $(this).parent('li').nextAll().find('.rating').addClass('far');
                $(this).parent('li').nextAll().find('.rating').removeClass('fas');
            });
            $ratingCount = $(this).parent('li').prevAll().find('.rating').length;                         
        });
        $finalRating = 1 + $ratingCount;  
        console.log($ratingCount);
        console.log($finalRating); 
    });

and HTML is as follows:

<ul>
    <li><span class="rating-link"><i class="far fa-star rating"></i></span></li>
    <li><span class="rating-link"><i class="far fa-star rating"></i></span></li>
    <li><span class="rating-link"><i class="far fa-star rating"></i></span></li>
    <li><span class="rating-link"><i class="far fa-star rating"></i></span></li>
    <li><span class="rating-link"><i class="far fa-star rating"></i></span></li>
</ul>

Really appreciate your solution.

Answer 1

You are able to access the values outside of click event handler. It's just that, they are not initialized that's why giving undefined and NaN as output.

Your console is printed only when document ready runs and hence you are unable to get output when the element is clicked.

Besides that, you had added a lot of unnecessary code which is not a good practice. Have a look at the code below :

 $(document).ready(function() { let $finalRating = 0; $('.rating-link').on('click', function() { $(this).find('.rating').addClass('fas').removeClass('far'); var wrap = $(this).parent('li'); wrap.prevAll().find('.rating').addClass('fas').removeClass('far'); wrap.nextAll().find('.rating').addClass('far').removeClass('fas'); $finalRating = wrap.prevAll().addBack().find('.rating').length; console.log($finalRating); }); console.log($finalRating); });

 ul { list-style-type: none; } ul li { display: inline; } .rating-link { cursor: pointer; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/all.min.css"> <ul> <li><span class="rating-link"><i class="far fa-star rating"></i></span></li> <li><span class="rating-link"><i class="far fa-star rating"></i></span></li> <li><span class="rating-link"><i class="far fa-star rating"></i></span></li> <li><span class="rating-link"><i class="far fa-star rating"></i></span></li> <li><span class="rating-link"><i class="far fa-star rating"></i></span></li> </ul>

Answer 2

In $(document).ready(function() , the value of $finalRating is based on the value of $ratingCount ( $finalRating = 1 + $ratingCount; ). As $ratingCount is still undefined at that point, you won't see a value for either of them.

I think it is important to consider the order in which the code runs. All of $(document).ready(function() will run first, then, some time after that, when the user clicks on one of the <li> elements, the function $('.rating-link').on('click', function() will run.

So the part written after the click event will not happen before any clicking is done, not after. To be able to keep track of the values as they change, you may wish to do something like this:

 $(document).ready(function() { let $finalRating = 1; let $ratingCount = 0; //if user wants to increase rating $('.rating-link').on('click', function() { $(this).children('.rating').addClass('fas'); $(this).children('.rating').removeClass('far'); $(this).parent('li').prevAll().find('.rating').addClass('fas'); $(this).parent('li').prevAll().find('.rating').removeClass('far'); //if user wants to lower rating $(this).parent('li').prevAll().children('.rating-link').on('click', function() { $(this).parent('li').nextAll().find('.rating').addClass('far'); $(this).parent('li').nextAll().find('.rating').removeClass('fas'); }); $ratingCount = $(this).parent('li').prevAll().find('.rating').length; updateFinalRating(); }); function updateFinalRating() { //do something useful with the updated rating here $finalRating = 1 + $ratingCount; console.log('$ratingCount: ' + $ratingCount); console.log('$finalRating: ' + $finalRating); }; });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li><span class="rating-link">Click me! (1)<i class="far fa-star rating"></i></span></li> <li><span class="rating-link">Click me! (2)<i class="far fa-star rating"></i></span></li> <li><span class="rating-link">Click me! (3)<i class="far fa-star rating"></i></span></li> <li><span class="rating-link">Click me! (4)<i class="far fa-star rating"></i></span></li> <li><span class="rating-link">Click me! (5)<i class="far fa-star rating"></i></span></li> </ul>