CODEWITHSUNDEEP
javascriptonclick
Jeremy
Jeremy

Reputation: 180

Javascript - onclick

first time posting here, but god know's I use this site to search for problems all the time :P Well, I'm having a problem of my own now that I can't seem to figure out easily searching around Google, and after playing with it for about 2 hours, I've finally decided to post a question and see what you guys think.

What I'm trying to accomplish here is to have a button that appears over a div when you hover over it that, when clicked, opens an editing pane. The button appears over the div correctly, but for some reason I cannot seem to make the onclick function work to save my life lol. Here's the code I'm working with. If it's not enough, please let me know and I'll add a little more sauce. :P

function place_widget(name, properties){
//bbox
var pleft = properties[0];
var ptop = properties[1];
var width = properties[2];
var height = properties[3];
var pright = pleft + width;
var pbottom = pleft + height;
var bbox = [pleft, ptop, pright, pbottom];
boxes[name] = bbox;

//ID's
var id = 'widget_' + name;
var editspanid = id + "_editspan";
var editbuttonid = id + "_editbutton";
var editpaneid = id + "_editpane";

//Creating Elements
var div = "<div id='" + id + "' class='widget' onmouseover='widget_hover(event);' onmouseout='widget_out(event);'>";
var editbutton = "<a id='" + editbuttonid + "' href='#'><img onclick='toggleEdit;' src='../images/edit_button.png'></a>";
var editspan = "<span id='" + editspanid + "' class='editspan'>" + editbutton + "</span>";
var editpane = "<span id='" + editpaneid + "' class='editpane'>:)</span>";
div += editspan + editpane + "</div>";
body.innerHTML += div;

//Configuring Elements
var editspanelement = document.getElementById(editspanid);
var editbuttonelement = document.getElementById(editbuttonid);
editbuttonelement.onclick = alert; //Does nothing.
var editpaneelement = document.getElementById(editpaneid);
var mainelement = document.getElementById('widget_' + name);
mainelement.style.left = (pleft + leftmost) + "px";
mainelement.style.top = (ptop + topmost) + "px";
mainelement.style.width = width;
mainelement.style.height = height;
getContentsAJAX(name);
}

Sorry for the ugly code :P Anyone have any idea why the onclick function isn't working?

Also, a bit of extra info: If I open up firebug and put in :

document.getElementById('widget_Text_01_editbutton').onclick = alert;

When I click the button, I get:

uncaught exception: [Exception... "Illegal operation on WrappedNative prototype object" nsresult: "0x8057000c (NS_ERROR_XPC_BAD_OP_ON_WN_PROTO)" location: "native frame :: <unknown filename> :: <TOP_LEVEL> :: line 0" data: no]

I'm not exactly sure what that means off hand.

Thanks!

Upvotes: 2

Views: 15796

Answers (4)

Harvindra Singh
Harvindra Singh

Reputation: 1

It will help you in executing.

<img onclick='toggleEdit;' src='../images/edit_button.png'>

Upvotes: -1

jfriend00
jfriend00

Reputation: 708156

Start by changing this:

editbuttonelement.onclick = alert; //Does nothing.

to this:

editbuttonelement.onclick = function() {alert("Got a click");};

and then change this:

var editbutton = "<a id='" + editbuttonid + "' href='#'><img onclick='toggleEdit;' src='../images/edit_button.png'></a>";

to this:

var editbutton = "<a id='" + editbuttonid + "' href='#'><img onclick='toggleEdit();' src='../images/edit_button.png'></a>";

What you are clicking on? The image or the link or the span? Do you know which is getting the click event?

Upvotes: 3

Esailija
Esailija

Reputation: 140234

document.getElementById('widget_Text_01_editbutton').onclick = alert;

causes illegal invocation because it is trying to set this to something else (the element) than window inside alert.

alert.call( {} )
//TypeError: Illegal invocation

alert.bind( window ).call( {} )
//works

So either:

document.getElementById('widget_Text_01_editbutton').onclick = alert.bind( window );

or even better as the above will only work in some browsers:

document.getElementById('widget_Text_01_editbutton').onclick = function(){alert();};

Upvotes: 0

Mike Christensen
Mike Christensen

Reputation: 91724

Can you try changing:

<img onclick='toggleEdit;' src='../images/edit_button.png'>

to:

<img onclick='toggleEdit();' src='../images/edit_button.png'>

Also, is "alert" a function you wrote?

Upvotes: 3

Related Questions