CODEWITHSUNDEEP
javascripthtmlsvgonclickprototypejs
ross
ross

Reputation: 1

Javascript Prototype function and SVG setAttribute(onclick)

Trying to use an svg onClick to call a prototype function.

Usually to call a prototype function I would just do this.(functionName) but when I put it into the .setAttribute(onclick, "this.(functionName)") it does not recognise the prototype function. Has anyone had any experience in this?

In case the above wasn't clear heres the basic jist of it...

function myobject(svgShape) {
    this.svgshape.setAttribute(onclick, 'this.doSomething()');
}
myobject.prototype.doSomething = function() {
    alert("works");
}

Upvotes: 0

Views: 1703

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1074038

Three things that may help:

1) First off, I think you're missing this line from the top of your myobject function:

this.svgshape = svgshape;

I'm assuming that was just an error posting the question and have inserted that below.

2) Normally when you're using Prototype (or any modern library), you don't use strings for callbacks, you use functions. Also, you normally assign handlers using the library's wrapper for addEventListener / attachEvent (observe, in Prototype's case) rather than the old DOM0 attribute thing. So:

function myobject(svgShape) {
    this.svgshape = svgshape;
    $(this.svgshape).observe('click', this.doSomething); // STILL WRONG, see below
}
myobject.prototype.doSomething = function() {
    alert("works");
}

3) But JavaScript doesn't have methods (it doesn't really need them), it just has functions, so the above won't ensure that this (the context of the call) is set correctly. With Prototype you'd use bind to set the context:

function myobject(svgShape) {
    this.svgshape = svgshape;
    $(this.svgshape).observe('click', this.doSomething.bind(this));
}
myobject.prototype.doSomething = function() {
    alert("works");
}

(Or you can use your own closure to do it. The advantage of bind is that the closure is in a very well-controlled environment and so doesn't close over things you don't want kept around.)

Now, I've never done any SVG programming with Prototype, so if observe doesn't work for some reason, you might try directly assigning to the onclick reflected property:

function myobject(svgShape) {
    this.svgshape = svgshape;
    this.svgshape.onclick = this.doSomething.bind(this);
}
myobject.prototype.doSomething = function() {
    alert("works");
}

I'm still using bind there so that this has the correct value.

These posts from my anemic little blog offer more discussion of the above:

Upvotes: 3

Related Questions