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'
            }

Then the two variables need to be scoped so that they are available to the click handler. Currently you have them scoped as `var` in each of the callbacks. That will make them only exist in the callbacks. You have to raise the scope of the variable, or store them in the DOM some where that the click handler knows to grab them from. — Taplar, Jun 10 '19 at 16:55
isnt it duplicate of this ?: https://stackoverflow.com/a/9467172/4718434 — yaya, Jun 10 '19 at 16:56
@Taplar, i defined the variables in a global function, but it's not changing anything, how can i put the variables to the DOM? — Nicolas Boulein, Jun 10 '19 at 17:00
@NicolasBoulein can you show us what you mean by "in a global function"? — Taplar, Jun 10 '19 at 17:01
@NicolasBoulein Hi - just following up. Was your question answered satisfactorily? If there is more I can help with, please add a comment below my answer, or edit your question to clarify what else you want to know. Otherwise, it would be great if you could choose a "best answer" (by clicking the checkmark beside the answer) to close out the question. If no answer provided helpful information, please add your own answer and select that as the best answer. *(You won't get any points for doing so, but that will close out the question.)* Thanks! — cssyphus, Jun 11 '19 at 23:31

score 1 · Answer 1 · answered Jun 10 '19 at 17:01

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);

    });
});

score 1 · Answer 2 · answered Jun 10 '19 at 17:16

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.

Passing variable to jQuery click handler

2 Answers2