Multiple elements using the same click function at once. How?

Question

I am using Raphael JS, but I think this is pure JavaScript or maybe jQuery question.

I have two elements a text and an circle(ellipse) and I am using a variable to store them for later usage.

So, I was thinking that instead of repeating myself over and over again I will create an array and use it on click.

But it is not working. How to solve this problem and assign onclick for every variable(object) in my array?

var circle = paper.ellipse(350, 320, 95, 90);
var text = paper.text(350, 320, "My text");

var myArray = [circle, text];
myArray.click(function () {
    window.location = "http://somewebsite.com";
});

i doubt arrays have a .click function...

jbabey
– jbabey

2012-07-24 17:31:31 +00:00
Commented Jul 24, 2012 at 17:31 — jbabey
– jbabey, Commented Jul 24, 2012 at 17:31

lynks · Accepted Answer · 2012-07-24 17:09:34Z

1

The jQuery $.each function can help you with this;

$.each(myArray, function(i, v) {
    v.click(function() {
        window.location = "http://somewebsite.com";
    });
});

edited Jul 24, 2012 at 17:09

answered Jul 24, 2012 at 16:55

lynks

5,7097 gold badges27 silver badges43 bronze badges

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

Comments

pb2q · Accepted Answer · 2012-07-24 17:11:51Z

1

You needn't store the objects in an array if you just want to keep them around, you've already referenced them with two variables: circle and text. Define the function once and then assign it to any element that uses it:

var circle = paper.ellipse(350, 320, 95, 90);
var text = paper.text(350, 320, "My text");

function clickFunction()
{
    window.location = "http://somewebsite.com";
}

circle.addEventListener("click", clickFunction);
text.addEventListener("click", clickFunction);

Or, using jQuery:

circle.click(clickFunction);
text.click(clickFunction);

answered Jul 24, 2012 at 17:11

pb2q

59.9k19 gold badges150 silver badges152 bronze badges

Comments

Aukhan · Accepted Answer · 2012-07-24 19:38:21Z

1

If you want to do it with raphaelJS ...

var circle = paper.ellipse(350, 320, 95, 90);
var text = paper.text(350, 320, "My text");
var click_set = paper.set();
click_set.push(circle);
click_set.push(text);

click_set.click(function(){
 // do what you want ... this function will automatically be bound to all the elements that //you push in the set
               });

answered Jul 24, 2012 at 19:38

Aukhan

4814 silver badges9 bronze badges

Comments

jbabey · Accepted Answer · 2012-07-24 17:32:43Z

0

Just loop over the elements and append the handler to each of them. No need for any libraries.

var circle = paper.ellipse(350, 320, 95, 90);
var text = paper.text(350, 320, "My text");

var myArray = [circle, text];
var handler = function () {
    window.location = "http://somewebsite.com";
};

for (var i = 0; i < myArray.length; i++) {
    myArray[i].onclick = handler;
}

answered Jul 24, 2012 at 17:32

jbabey

46.8k12 gold badges73 silver badges94 bronze badges

Collectives™ on Stack Overflow

Multiple elements using the same click function at once. How?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related