Question

I have an anchor tag on an ASP.NET page, whose text (inner HTML) I wish to populate, through JavaScript, with an integer retrieved from a Web Service.

I tried this using the following:

HTML:

<script type="text/javascript">
    $(function () {
        GetEntityCount([{ domId: document.getElementById("entityCountIndicator")}]);
    });
</script>

<a id="entityCountIndicator"></a>

JavaScript:

function GetEntityCount(domId) {
    $.ajax({
        type: 'POST',
        url: webServiceProxy + '/GetEntityCount',
        cache: true,
        success: function (xml) { GotEntityCount($(xml).text(), domId); }
    });
}

function GotEntityCount(entityCount, domElement) {
    if (isNaN(entityCount)) return;
    domElement.innerHTML = entityCount.toString();
}

but it did not work.

After examining the variables in FireBug, and doing a bit of experimentation I managed to get it working by changing the line that sets the innerHTML to:

domElement[0].domId.innerHTML = entityCount.toString();

This seemed to do the trick, but I have no idea why it is working or what is happening here.

Why is the document.getElementById(“entityCountIndicator”) call apparently returning an array, rather than a single element? And why do I then have to probe the first element of that array and set innerHTML on its domId property?

Answer 1

Because your are passing an array in

[{ domId: document.getElementById("entityCountIndicator")}]