Javascript variable is assigned as [object HTMLDivElement] rather than string?

Question

My DOM skills are weak and I can't work out why a javascript variable is assigned this object pointer value rather than the string value itself.

Short story is that I am making an AJAX call for some screen data and it returns html and populates a div.innerHTML with the following :

 <input id="page_tag_add_input"></input>';

    <span class="page_tag_add"><a href="#" onclick="var newTag = document.getElementById('page_tag_add_input').value; doTagXhr('add_tag.php', newTag); alert(newTag);">Add</a></span>

The doTagXhr function is a YUI connection manager AJAX call.

When the user clicks add, firebug shows me that the newTag variable is stored as "[object HTMLDivElement]", yet when the alert(newTag) javascript kicks in (above), it shows the value correctly as the input text string?? I've exhausted Google searches :-(

Are there any gurus out there that can point me in the right direction? Thanks.

Answer 1

You're assigning newTag to a DOM Element property. I think you've mistaken what Firebug reports it as, that code indicates it's clearly not an element reference, and unless you're manipulating it in the xhr function ( which you didn't paste the code to ) then it's still a string.

Edit:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"&gt;&lt;/script&gt;
<script>
    function doTagXhr(page, input) {
    window.input = input;
    $.ajax({
        url:page,
        type:'POST',
        data:input
    });
    }
</script>
<input id="page_tag_add_input" value="test">

    <span class="page_tag_add"><a href="#" onclick="var newTag = document.getElementById('page_tag_add_input').value; doTagXhr('regex.php', newTag); alert(newTag);">Add</a></span>

This always stays a string. I don't know what else it could be other than your xhr function that's reassigning the variable.