Difference between [object Object] and [object HtmlDivElement]. Div play with jQuery

Question

I am using divs like radio buttons and have a question.

I declare a function and variable like so

I have two styles set up, a .buttonUp and .buttonDown to be applied upon a div's onclick event.

<script type="text/javascript">
var onCheck;

function setRadio(param_ElementRef) 
{
    if (param_ElementRef != onCheck) 
    {
        if (onCheck) 
        {
            onCheck.className = 'buttonUp';
        }
        param_ElementRef.className = 'buttonDown';
        onCheck = param_ElementRef;
    }
}
</script>

I call a function in the div like this

<div id="Yes" class="buttonUp" onclick="setRadio(this)">Yes</div>
<div id="No" class="buttonUp" onclick="setRadio(this)">No</div>
<div id="Maybe" class="buttonUp" onclick="setRadio(this)">Maybe</div>

This works fine, but I'm having trouble setting a default value for the onCheck variable.

I have tried giving the divs id's, but when I alert($('#Yes') it displays [object Object], whereas if I alert(param_ElementRef) it displays [object HtmlDivElement]

There is obviously a difference between the two, and is there a way of returning the same object by id reference or similar?

Many thanks

Answer 1

The reason alert($('#Yes') displays [object Object] is because it is a jQuery object.

On the other hand if you want [object HtmlDivElement] to be returned try alert(document.getElementById('Yes')) instead of alert($('#Yes'))

You can also get the plain js object from a jQuery object by using get()

for eg. alert($('#Yes')) displays [object Object] and if you try alert($('#Yes').get(0)) you will get [object HtmlDivElement]