innerHTML yielding undefined, but correct data is visible

Question

    var Model,node;
    document.getElementById('sedans').innerHTML='';
    var thismodelabbr,prevmodelabbr;
    for(var j=0; j<xmlDoc.getElementsByTagName('data').length; j++){
            node = xmlDoc.getElementsByTagName('data')[j];
            thismodelabbr=node.getAttribute('model');
            if(prevmodelabbr!=thismodelabbr){
                Model+='<a href="">'+ node.getAttribute('model')+'</a>';
            }
            prevmodelabbr=thismodelabbr;
            document.getElementById('sedans').innerHTML=Model;
    }

The above javascript snippet is working correctly and as needed, but I'm getting an "Undefined" response before the entry is displayed within its respective page. I'm assuming it has to do with the .innerHTML call. Any insight would be deeply appreciated.

Answer 1

Model starts out as an uninitialized variable, containing undefined. In the loop you append strings to it with +=, so in the first iteration the first string is "appended" to the initial undefined value. To do this javascript converts undefined to a string and appends the new string to it, so that you end up with a string starting with "undefined".

If you initialize Model with an empty string the issue should go away:

Model = '';