Passing variable to jQuery click handler

Question

I would like to pass two variables to a click function, but i dont know how can i do that. I would like to pass variable call stringUrl and stringUrl2, but the console told me that the variables are undefined.

First function :

 $('.fancy .slot').jSlots({
        number : 1,
        winnerNumber : 1,
        spinner : '#playFancy',
        easing : 'swing',
        time : 1000,
        loops : 1,
        onStart : function() {

            $('.slot').removeClass('winner');
        },
        onWin : function(winCount, winners, finalNumbers) {

        },  
        onEnd : function(winCount, winners, finalNumbers) {


        var selector = $('.fancy .slot li:nth-child(' +winCount[0])
        var stringUrl = selector.css('background-image');
        stringUrl = stringUrl.replace('url(','').replace(')','');
        stringUrl = stringUrl.substr(41);
        alert(stringUrl);

        }
    });

Second function :

  $('.fancy2 .slot2').jSlots({
        number : 1,
        winnerNumber : 1,
        spinner : '#playFancy2',
        easing : 'easeOutSine',
        time : 1000,
        loops : 1,
        onStart : function() {
            $('.slot2').removeClass('winner');
        },
        onWin : function(winCount, winners, finalNumbers) {

        },
        onEnd : function(winCount, winners, finalNumbers) {


        var selector = $('.fancy2 .slot2 li:nth-child(' +winCount[0])
        var stringUrl2 = selector.css('background-image');
        stringUrl2 = stringUrl2.replace('url(','').replace(')','');
        stringUrl2 = stringUrl2.substr(41);
        alert(stringUrl2);

        }
    });

the function where i need the variables :

$('#btnConfirm').click(function(){


        console.log(stringUrl);
        console.log(stringUrl2);
        if(stringUrl){


        Swal.fire({
        background: 'no-repeat center url(/start/assets/img/rouletteArt/popup-bravo.png)',
        showConfirmButton : true,
        confirmButtonClass : 'placeButton',
        confirmButtonColor: '#253654',
          animation: false,
            customClass: {
                popup: 'animated tada'
            }

Answer 1

You have this:

$(document).ready(function(){
    $('.fancy .slot').jSlots({
        //stuff

            var stringUrl = selector.css('background-image');
            stringUrl = stringUrl.replace('url(','').replace(')','');
            stringUrl = stringUrl.substr(41);
    });
    $('.fancy2 .slot2').jSlots({
            //stuff

            var stringUrl2 = selector.css('background-image');
            stringUrl2 = stringUrl2.replace('url(','').replace(')','');
            stringUrl2 = stringUrl2.substr(41);
    });
    $('#btnConfirm').click(function(){
        alert(stringUrl);
        alert(stringUrl2);

    });
});

You want this:

$(document).ready(function(){
    var stringUrl, stringUrl2; //<=====================

    $('.fancy .slot').jSlots({
        //stuff

            stringUrl = selector.css('background-image'); //<==============
            stringUrl = stringUrl.replace('url(','').replace(')','');
            stringUrl = stringUrl.substr(41);
    });
    $('.fancy2 .slot2').jSlots({
            //stuff

            stringUrl2 = selector.css('background-image'); //<==============
            stringUrl2 = stringUrl2.replace('url(','').replace(')','');
            stringUrl2 = stringUrl2.substr(41);
    });
    $('#btnConfirm').click(function(){
        alert(stringUrl);
        alert(stringUrl2);

    });
});

Answer 2

You can try using bind() for that:

onEnd: function(stringUrl, winCount, winners, finalNumbers) {

}.bind(null, stringUrl)

When you bind a variable like that, the callback will receive it as a parameter in front of the default parameters when executed. There could be some drawbacks on this practice but, if other scope suggestions fail, this can be the solution in your case as your code is pretty simple.