js syntax error when invoking mouseover callback

Question

I have some javascript code that creates an img tag with a mouseover callback, and adds the img tag to the page. The problem is that a javascript syntax error happens (in the Firefox Console) whenever the callback is invoked.

This code demonstrates the problem...

    
        var imgUrl = 'http://sstatic.net/so/img/logo.png';
        var img = document.createElement('img');
        img.setAttribute('src', imgUrl);
        img.setAttribute('onmouseover', function() {
            alert('mouseover ' + imgUrl);
        });
        document.body.appendChild(img);

The syntax error even happens when the callback function is an empty function.

Can anyone explain what's causing the syntax error and how to fix it?

(I'm using FF 3.5.2 on Win XP.)

Can you update your question and put in the error you get?

cllpse
– cllpse

2009-09-09 19:58:38 +00:00
Commented Sep 9, 2009 at 19:58 — cllpse
– cllpse, Commented Sep 9, 2009 at 19:58

Nosrama · Accepted Answer · 2009-09-09 19:59:44Z

6

You're passing in a function where a string is expected. Try this instead:

    var imgUrl = 'http://sstatic.net/so/img/logo.png';
    var img = document.createElement('img');
    img.src = imgUrl;
    img.onmouseover = function() {
        alert('mouseover ' + imgUrl);
    };
    document.body.appendChild(img);

answered Sep 9, 2009 at 19:59

Nosrama

15k13 gold badges51 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Gordon Gustafson Over a year ago

it works, but I'm still not exactly sure why, what did you change?

Kyle Rosendo Over a year ago

The function was assigned directly to the method, not via the setAttribute function, where a string is expected. A much cleaner solution than mine. +1

Nosrama Over a year ago

@CrazyJugglerDrummer: the setAttribute method takes 2 strings - so you could've used that method but you would have had to wrap the function in double-quotes and this could also have caused problems accessing the imgUrl value as now it would be looked for in global scope.

Collectives™ on Stack Overflow

js syntax error when invoking mouseover callback

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related