Uncaught ReferenceError: loadData is not defined! Why doesn't it recognize my function?

Question

I got this javascript code that i'm trying to call from my html by using a button type with an onclick=function. Unfortunately it gives me the error: function "loadData()" is undefined and I don't understand why. This is my javascript code:

function loadData(url) {
    var serialNumber = document.getElementById('searchBox').value;
    var xmlhttp;
    var txt, xx, x, i;
    alert(serialNumber);
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    }
    else {// code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            txt = "<table border='1'><tr><th>Serial</th><th>Product number</th><th>Product name</th><th>Account name</th><th>Document number</th></tr>";
            x = xmlhttp.responseXML.documentElement.getElementsByTagName("PRODUCT");
            for (i = 0; i < x.length; i++) {
                if (
                txt = txt + "<tr>";
                xx = x[i].getElementsByTagName("SERIAL");
                {
                    try {
                        txt = txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
                    }
                    catch (er) {
                        txt = txt + "<td>&nbsp;</td>";
                    }
                }
                xx = x[i].getElementsByTagName("PRODNM");
                {
                    try {
                        txt = txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
                    }
                    catch (er) {
                        txt = txt + "<td>&nbsp;</td>";
                    }
                }
                xx = x[i].getElementsByTagName("PRODNR");
                {
                    try {
                        txt = txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
                    }
                    catch (er) {
                        txt = txt + "<td>&nbsp;</td>";
                    }
                }
                xx = x[i].getElementsByTagName("ACCNAME");
                {
                    try {
                        txt = txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
                    }
                    catch (er) {
                        txt = txt + "<td>&nbsp;</td>";
                    }
                }
                xx = x[i].getElementsByTagName("NRDOC");
                {
                    try {
                        txt = txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
                    }
                    catch (er) {
                        txt = txt + "<td>&nbsp;</td>";
                    }
                }
                txt = txt + "</tr>";
            }
            txt = txt + "</table>";
            document.getElementById('showTable').innerHTML = txt;
        }
    }
    xmlhttp.open("GET", url, true);
    xmlhttp.send();
}

and this is the HTML code that calls that function:

<input type="text" id="searchBox" value="Enter serial number here" onFocus="this.value=''"/>
<input type="button" id="search" value="Search" onclick="loadData('prod_catalog.xml')"/>

Answer 1

It is because you have either not included the code for function correctly or there is error before in the code that is before function loadData. Check the consoles for errors. also check whether loadData is defined or not.

Answer 2

The problem was the "if" that Beterraba said. The problem is not that it wasn't closed, the problem is that it was an attempt of mine to do something that failed and somehow i forgot that bit in there. Thanks for the prompt responses! :)