Pass array to Javascript onClick function while adding links into a string?

Question

I know the question sounds strange, but it's really very simple. I have the following function which isn't working:

function start40Counter(counter40_set){console.log(counter40_set);
    var gid = counter40_set[0];
    var seat = counter40_set[1];
    var suits = counter40_set[2];
    var cont = "";
    $.each(suits, function (num, suit) {
        cont += "<a class='suitpick' onClick='pickSuit(counter40_set);'><img src='"+base+"images/someimg.png' title='Odaberi' /></a>";
    });
    $('#game40_picks').html(cont);
}

counter40_set is [10, 3, ["H", "S"]]. The part of the function that fails is the part this:

onClick='pickSuit(counter40_set);'

It says that counter40_set is not defined. I understand that. This wouldn't even work if counter40_set was a simple string instead of an array. If I try onClick='pickSuit("+counter40_set+");' I get a different error, saying H is not defined. I get this too, the array is rendered and JS doesn't know what H and S are.

I also tried passing the array elements (counter40_set[0] etc) individually but it still fails with the last element (["H", "S"]).

So, how do I pass this data to the onClick function in this case? There must be a more elegant way than concatenating the whole thing into a string and passing that to the function?

Btw, this is a simplified version. What I should really be passing in every iteration is [suit, counter40_set] so that each link chooses a different suit. I'm asking the simplified question because that will be enough to send me down the right path.

@Pointy as I said, counter40_set is [10, 3, ["H", "S"]] in this example. It's created in a back-end Node.js server. — sveti petar
– sveti petar, Commented Mar 6, 2014 at 15:37
So where is it defined on the page? It doesn't matter what it is on the server, what matters is how it's included with the code on the client. edit OH oh I see what you mean now. — Pointy
– Pointy, Commented Mar 6, 2014 at 15:38
@remyabel No, the problem lies where I said it lies, cardsuits is something different (a global var). I've removed it from the question to avoid confusion. — sveti petar
– sveti petar, Commented Mar 6, 2014 at 15:38
@Pointy The value is passed to the client through a socket. In the code above, console.log shows the value I named as the example. It's as simple as socket.on('start40Counter', function(counter40_set) { start40Counter(counter40_set); }); — sveti petar
– sveti petar, Commented Mar 6, 2014 at 15:40

Niko · Accepted Answer · 2014-03-06 15:41:26Z

2

It cannot work,because the context is lost and thus "counter40_set" is not set.

To fix it simply use jquery for the onlick as well:

$('#game40_picks').empty(); // get rid of everything
$.each(suits, function (num, suit) {
    var line = $("<a class='suitpick'><img src='"+base+"images/"+cardsuits[suit].img+"' title='Odaberi "+cardsuits[suit].name+"' /></a>");
   line.click(function(ev){
      ev.preventDefault(); // prevent default click handler on "a"
      pickSuit(counter40_set);
   });
   $('#game40_picks').append(line);
});

this way the "counter40_set" is available for the click function.

answered Mar 6, 2014 at 15:41

Niko

6,2692 gold badges40 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Joseph Marikle · Accepted Answer · 2014-03-06 15:49:53Z

You shouldn't use the onClick HTML attribute. Also, using DOM functions to build nodes saves the time it takes jQuery to parse strings, but basically the method below is to create the element and attach a click event listener and then append it to the specified element.

function start40Counter(event){console.log(event.data.counter40_set);
    var counter40_set = event.data.counter40_set;
    var gid = counter40_set[0];
    var seat = counter40_set[1];
    var suits = counter40_set[2];
    var cont = "";
    $.each(suits, function (num, suit) {
        var link = document.createElement('a');
        link.className = 'suitpick';
        $(link).on('click', {counter40_set: counter40_set}, start40Counter);

        var img = document.createElement('img');
        img.src= base + "images/" + cardsuits[suit].img;
        img.title = 'Odaberi ' + cardsuits[suit].name;

        link.appendChild(img);
        $('#game40_picks').append(link);
    });
}

Not tested but it might work out of the box.

Collectives™ on Stack Overflow

Pass array to Javascript onClick function while adding links into a string?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related