JS: Can not convert to object, childNodes related

Question

Ok, feeling stupid here, but wondering what the problem is here exactly.

Although the function works as it should, I get this JS Error in Opera. Not sure about other browsers...

Uncaught exception: TypeError: Cannot convert 'document.getElementById("shoutbox_area" + moduleId)' to object oElement = document.getElementById("shoutbox_area" + moduleId).childNodes;

Here is the relevant code:

function appendShout(XMLDoc)
{
 var shoutData = XMLDoc.getElementsByTagName("item");
 var oElement = [];

 if (shoutData.length > 0)
 {
  var moduleId = shoutData[0].getAttribute("moduleid");

  if (shoutData[shoutData.length - 1].getAttribute("lastshout") != "undefined")
  {
   for (var i = 0; i < shoutData.length; i++)
    if (shoutData[i].firstChild.nodeValue != 0)
     document.getElementById("shoutbox_area" + moduleId).innerHTML += shoutData[i].firstChild.nodeValue;


   oElement = document.getElementById("shoutbox_area" + moduleId).childNodes;
   var i = oElement.length;
   while (i--)
   {
    if (i % 2 == 0)
     oElement[i].className = "windowbg2";
    else
     oElement[i].className = "windowbg";
   }

   oElement[oElement.length - 2].style.borderBottom = "1px black dashed";
  }
 }
}

Can someone please help me to understand why it is giving me an error here:

oElement = document.getElementById("shoutbox_area" + moduleId).childNodes;

Can I not assign an array to the childNodes?

EDIT:

This JS Error occurs when I try and delete a shout. The JS function for deleting a shout is this:

function removeShout(shout, moduleID)
{
    var shoutContainer = shout.parentNode.parentNode;
    var send_data = "id_shout=" + shout.id;
    var url = smf_prepareScriptUrl(smf_scripturl) + "action=dream;sa=shoutbox;xml;" + "delete_shout;" + "canmod=" + canMod[moduleID] + ";" + sessVar + "=" + sessId;

    sendXMLDocument(url, send_data);

    var shoutID = 0;
    while (shoutID !== null)
    {
        var shoutID = document.getElementById(shout.parentNode.id);
        var moduleID = shoutID.parentNode.getAttribute("moduleid");

        if (shoutID.parentNode.lastChild)
        {
            var url = smf_prepareScriptUrl(smf_scripturl) + "action=dream;sa=shoutbox;xml;get_shouts=" + (shoutID.parentNode.lastChild.id.replace("shout_", "") - 1) + ";membercolor=" + memberColor[moduleID] + ";maxcount=" + maxCount[moduleID] + ";shoutboxid=" + shoutboxID[moduleID] + ";textsize=" + textSize[moduleID] + ";parsebbc=" + parseBBC[moduleID] + ";moduleid=" + moduleID + ";maxcount=" + maxCount[moduleID] + ";canmod=" + canMod[moduleID] + ";" + sessVar + "=" + sessId;

            getXMLDocument(url, appendShout);
        }

        element = shoutID.parentNode.childNodes;
        var i = element.length;
        while (i--)
        {
            if (i % 2 == 0)
                element[i].className = "windowbg2";
            else
                element[i].className = "windowbg";
        }

        shoutID.parentNode.removeChild(shoutID);
    }
}

Am using the following functions for the sending and getting the XMLHttpRequest as you may have noticed already in the removeShout function above:

// Load an XML document using XMLHttpRequest.
function getXMLDocument(sUrl, funcCallback)
{
    if (!window.XMLHttpRequest)
        return null;

    var oMyDoc = new XMLHttpRequest();
    var bAsync = typeof(funcCallback) != 'undefined';
    var oCaller = this;
    if (bAsync)
    {
        oMyDoc.onreadystatechange = function () {
            if (oMyDoc.readyState != 4)
                return;

            if (oMyDoc.responseXML != null && oMyDoc.status == 200)
            {
                if (funcCallback.call)
                {
                    funcCallback.call(oCaller, oMyDoc.responseXML);
                }
                // A primitive substitute for the call method to support IE 5.0.
                else
                {
                    oCaller.tmpMethod = funcCallback;
                    oCaller.tmpMethod(oMyDoc.responseXML);
                    delete oCaller.tmpMethod;
                }
            }
        };
    }
    oMyDoc.open('GET', sUrl, bAsync);
    oMyDoc.send(null);

    return oMyDoc;
}

// Send a post form to the server using XMLHttpRequest.
function sendXMLDocument(sUrl, sContent, funcCallback)
{
    if (!window.XMLHttpRequest)
        return false;

    var oSendDoc = new window.XMLHttpRequest();
    var oCaller = this;
    if (typeof(funcCallback) != 'undefined')
    {
        oSendDoc.onreadystatechange = function () {
            if (oSendDoc.readyState != 4)
                return;

            if (oSendDoc.responseXML != null && oSendDoc.status == 200)
                funcCallback.call(oCaller, oSendDoc.responseXML);
            else
                funcCallback.call(oCaller, false);
        };
    }
    oSendDoc.open('POST', sUrl, true);
    if ('setRequestHeader' in oSendDoc)
        oSendDoc.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    oSendDoc.send(sContent);

    return true;
}

Hopefully this is good enough, you can do a view source on it to see the actual HTML, but there are attributes that get added to the Shoutbox tags at runtime so as to be XHTML compliant, etc..

Please let me know if there is anything else you need?

Thanks :)

Answer 1

The code is breaking because shoutID is null in the second of these two lines, the second time through the loop:

var shoutID = document.getElementById(shout.parentNode.id);
var moduleID = shoutID.parentNode.getAttribute("moduleid");

The first of those lines is strange. Why not just use var shoutID = shout.parentNode;?
Also, the moduleId attribute seems to be nowhere around.

What are you trying to achieve with the while loop?