Prototyping an element

[itsjareds]

Hi, I'm trying to create a Youtube video inserter script for my site. Long story short, I need to be able to prototype an HTML element and add a string into the element's innerHTML, like this: myObj.insertVid(5sw2OvIgoO8); I'm using jQuery to getElementsByClass("sip").

Object.prototype.insertVid = function(id) {
	if (id.length > 0) {
		var insert_string = '<embed src="http://www.youtube.com/v/' + id + '&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"/>';
		this.innerHTML += insert_string;
	}
}

embeds = $(".sip");
for (var i=0; i<embeds.length; i++) {
	// various code to find param for insertVid()
	embeds[i].insertVid(id);
}

All of this code seems correct to me, but in the error console (Firefox 3.5.2), it's telling me: Error: embeds[i].insertVid is not a function Help?

[itsjareds]

bump

[ShawnCplus]

A) Don't bump like that, its annoying. B) Try Element.prototype. If that doesn't work I have no idea since both Object.proto... and Element.proto... worked for me.

[itsjareds]

A) I waited a day with no response and my thread was already 9 or 10 posts down. I would prefer not to actually post "bump" if there was another way to bump it up the list, say every 24 hours.

B) Element.prototype didn't work either, Firefox gave me: Error: Element.prototype is undefined The only thing that may be causing this is the fact that I'm running this through a Greasemonkey userscript. Prototype should work fine in a userscript though. I'm not sure what else could be the case.. I even ran alert(typeof embeds[i]); and it gave me "object". Seems like I am doing everything right, but something is wrong somewhere.

Thanks for replying :)

[ShawnCplus]

Make sure you're never trying to call the method before you actually define the prototype. Grab Firebug if you don't already and then do some breakpoint debugging to find exactly where the error is coming from.

[itsjareds]

I don't think Greasemonkey works with Firebug as far as breakpoints because GM scripts are inserted and removed quickly at the end of a page load.

AFAIK, my script doesn't call the prototype before it's defined as the definition is at the top of my script.

Object.prototype.insertVid = function(id) {
	if (id.length > 0) {
		var insert_string = '<embed src="http://www.youtube.com/v/' + id + '&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"/>';
		this.innerHTML += insert_string;
	}
}

if (window == window.top)
	parseEmbeds();

function parseEmbeds() {
	var embeds = $(".sip");
	var handle = new String();
	var cmds = new Array();
	for (var i=0; i<embeds.length; i++) {
		handle = embeds[i].title;
		cmds = handle.split(";");
		for (var v=0; v<cmds.length; v++) {
			if (cmds[v].length > 0) {
				if (/vid\([^\)]*\)/i.test(cmds[v])) {
					var vids = cmds[v].match(/vid\(([^\=]*\?v=([^\)]*))\)/i);
					embeds[i].insertVid(vids[2]);
				}
			}
		}
	}
}

[Troy III]

try changing the embeds[i].insertVid(id); into

insertVid(embeds[i].id);

[Troy III]

and in case, this doesn't solve your problem try bypassing

Object.prototype.insertVid = function(id) {...

with:
var insertVid = function(id) {...