ASP.NET MasterPage + Javascript Error

Question

After converting an ASP.NET webform (v3.5) to use a master page, I started getting a strange Javascript error.

The content page has a block of javascript. Here it is:

 <script type="text/javascript">

    var attCount = 0;

    function CreateAttachmentControl() {
        var newAtt = document.createElement('span');
        var newAttName = 'area' + attCount;
        newAtt.setAttribute('id', newAttName);
        newAtt.setAttribute('name', newAttName);

        var newInput = document.createElement('input');
        var newInputName = 'att' + attCount;
        newInput.setAttribute('type', 'file');
        newInput.setAttribute('id', newInputName);
        newInput.setAttribute('name', newInputName);

        if (newInput.addEventListener) {
            newInput.addEventListener("onchange", CreateAttachmentControl, false);
        } else if (newInput.attachEvent) {
            newInput.attachEvent("onchange", CreateAttachmentControl);
        } else {
            newInput.onchange = CreateAttachmentControl;
        }

        var newRemove = document.createElement('a');
        newRemove.setAttribute('href', 'javascript:RemoveAttachmentControl("' + attCount + '")');
        newRemove.setAttribute('title', 'Remove this attachment');
        newRemove.innerHTML = 'X';
        newAtt.appendChild(newInput);
        newAtt.appendChild(document.createTextNode(' '));
        newAtt.appendChild(newRemove);
        newAtt.appendChild(document.createElement('br'));
        attArea.appendChild(newAtt); // error here

        attCount++;
    }

    function RemoveAttachmentControl(n) {

        // get input element
        var input = document.getElementById('att' + n);

        // if the input is blank dont delete
        if (input.value != '' && input.value != null) {
            var att = document.getElementById('area' + n);
            attArea.removeChild(att);
        }
    }
</script>

The error is: 'attArea' is undefined

But, I know that it is not, because just below my block of javascript is this:

...<td align="left" colspan="2" style="height: 13px" id="attArea" name="attArea"></td>...

This working perfectly before I converted the webform into content page with a master page. Is there some known Javascript + Masterpage issues?

Thanks

Answer 1

In the code sample you provided, attArea is undefined. The first reference to it you are calling attArea.appendChild(). Is it declared somewhere higher in the source that you didn't provide?

Answer 2

I think you are missing:

var attArea = document.getElementById('attArea');
attArea.appendChild(newAtt); // no more error!