Блог

впервые публикую здесь, но, бог знает, я постоянно использую этот сайт для поиска проблем: P Что ж, теперь у меня возникла собственная проблема, поскольку я, похоже, не могу легко разобраться с поиском в Google, и, поиграв с ним около 2 часов, я, наконец, решилчтобы опубликовать вопрос и посмотреть, что вы, ребята, думаете.

Чего я пытаюсь добиться здесь, так это иметь кнопку, которая появляется над div при наведении на нее курсора мыши, при нажатии на которую открывается панель редактирования. Кнопка отображается над div правильно, но по какой-то причине я не могу заставить функцию onclick работать, чтобы спасти мою жизнь, лол. Вот код, с которым я работаю. Если этого недостаточно, пожалуйста, дайте мне знать, и я добавлю еще немного соуса. 😛

 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);
}
 

Извините за уродливый код: P У кого-нибудь есть идеи, почему функция onclick не работает?

Кроме того, немного дополнительной информации: если я открою firebug и вставлю :

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

Когда я нажимаю на кнопку, я получаю:

 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]
 

Я не совсем уверен, что это означает.

Спасибо!

Можете ли вы попробовать измениться:

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

Для:

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

Кроме того, является ли «оповещение» функцией, которую вы написали?

Начните с изменения этого:

 editbuttonelement.onclick = alert; //Does nothing.
 

к этому:

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

а затем измените это:

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

к этому:

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

На что вы нажимаете? Изображение, или ссылка, или промежуток времени? Знаете ли вы, что вызывает событие click?

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

причины illegal invocation , потому что он пытается установить this что-то другое (элемент), чем window внутри alert .

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

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

Так что либо:

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

или даже лучше, поскольку вышеуказанное будет работать только в некоторых браузерах:

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

Это поможет вам в выполнении.

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