Question

I try to copy an onClick function from an image to an span object.
But I don’t get it.

I have tried it directly with onClick=img.onClick, onClick=new Function(img.onClick) and more.

if (img.onclick != undefined)
{
    var imgClick = img.onclick;
    strNewHTML = strNewHTML + " onMouseOver=\"this.style.background"
    + "= '#cecece'\" onMouseOut=\"this.style.background = ''\" onclick=\""+imgClick+"\">";
}

Can anyone help me?

Thanks!

Answer 1

span.onclick= img.onclick;

JavaScript is case-sensitive and DOM event handler properties are all lower-case.

edit:

if (img.onclick != undefined) {
    strNewHTML = strNewHTML + " onMouseOver=\"this.style.background"
    + "= '#cecece'\" onMouseOut=\"this.style.background = ''\" onclick=\""+imgClick+"\">";
}

Well that’s a completely different thing. You’re creating an HTML string. But the onclick DOM property contains a function object. function objects can’t be added into strings. (They would get converted to what you get if you call somefunction.toString(), which is not something that will work as an event handler.)

If you wanted to fetch the textual value of the onclick attribute to add into HTML, you’d have to do it with the span.getAttribute('onclick') method. But that won’t work in IE due to bugs in its implementation of getAttribute, so you’d have to resort to span.getAttributeNode('onclick').value. And then when you added it into the HTML string, you’d have to HTML-escape it, so that any <, & and " characters in it came out as < etc., otherwise they’ll break the markup.

However, this is really ugly; don’t do it. In reality, HTML string-slinging invariably sucks. Especially when you’ve got JavaScript code inside HTML inside a JavaScript string. The escaping rules get insane and if you make a mistake escaping content that comes from user input, you’ve given yourself a cross-site-scripting security hole.

Instead, use DOM methods. This takes all the escaping out of the equation and it’s generally more readable than hacked-together HTML markup strings. Then you can freely assign onclick to whatever function you like. eg.:

var span= document.createElement('span');
if (img.onclick)
    span.onclick= img.onclick;
span.onmouseover= function() {
    this.style.background= '#CECECE';
};
span.onmouseout= function() {
    this.style.background= '';
};

someparentelement.appendChild(span);

Also consider replacing the mouseover/mouseout with a simple CSS :hover rule, for maintainability. The only browser that still needs help with :hover is IE6.