Bug 55493 – SVG Tiny 1.2 onclick handler doesn't fire function defined in onload handler

• Component: JavaScriptCore
• Status: RESOLVED INVALID

[Tyler Pham]

Created attachment 84270 [details]
illustration of the SVG onclick handlers

If a function is defined inside the onload handler of an SVG document, and trying to call it with an onclick from an SVG element will execute an error in in Safari 5.0.3(6533.19.4)

The red rectangle is set to handle "onclick" with a function call inside the onload handler:

	function red() {
		alert("red");
	}
	
The black rectangle is set to handle "onclick" with a function call outside the onload handler:

	function custom(evt) {
		alert(evt.target.id);
	}
	
Note: The error in Safari developer (Inspect Element) panel issues: "ReferenceError: Can't find variable: red" (red is the function)?

[Alexey Proskuryakov]

That's correct behavior - function red is not defined in global scope, it's defined in the scope of init function. You can use something like the below to define a function in global scope from init:

window.red = function() { alert("red") }

[Tyler Pham]

I understand that the resolution is to define the function globally.

I guess, I should rephrase my question:
Why is it that I cannot reuse a function declared locally?

This is no big issue to me but it is out of curiosity. For example using local variables ONLY within the scope of the init function.

[Tyler Pham]

I guess, this is a very primitive question. So I'll leave this "RESOLVED".

Thanks for your response, Alexey.

[Alexey Proskuryakov]

You can use the function (I actually suggested how to do that in comment 1). It's just not accessible by name from outside its scope. That's a good thing, because it lets one add functions in local scope without worrying about name clashes with functions defined in libraries like jQuery - similarly to local variables.