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
– Taplar, Commented Jun 10, 2019 at 16:55
isnt it duplicate of this ?: stackoverflow.com/a/9467172/4718434 — yaya
– yaya, Commented Jun 10, 2019 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
– Nicolas Boulein, Commented Jun 10, 2019 at 17:00
@NicolasBoulein can you show us what you mean by "in a global function"? — Taplar
– Taplar, Commented Jun 10, 2019 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
– cssyphus, Commented Jun 11, 2019 at 23:31

cssyphus · Accepted Answer · 2019-06-10 17:01:47Z

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

    });
});

DontVoteMeDown · Accepted Answer · 2019-06-10 17:16:52Z

1

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.

answered Jun 10, 2019 at 17:16

DontVoteMeDown

21.5k10 gold badges72 silver badges113 bronze badges

Collectives™ on Stack Overflow

Passing variable to jQuery click handler

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related