(js) passing whole object into onclick method rather than a string

Question

<div class="rating" onclick="swapImg('bad')"><img id="bad" class="unselected" src="img/unrated.gif"/></div>

my javascript is passing the entire img object into swapImg, and not the string 'bad.' for example, if i console.log(param) the param being passed into swapImg, i get:

<img id="bad" class="unselected" src="img/unrated.gif">

what is happening???

function swapImg(imgId) {
    console.log(imgId);
    var image = document.getElementById(imgId);
    console.log("success2");
}

Answer 1

I tested your function and HTML and it worked fine.

Even the this variable would be set to the div not the image. Is it possible you have any additional handlers somewhere else on the page? Or possibly have a stray onclick event on the img tag itself?

I tested in Firefox 3.5. Judging by the fact that your syntax is correct, something else is causing this to fail other than what you have posted.

You can see my test here. In Firefox or Safari (in developer mode) click the red div, and the console will show:

bad
success2