Reference Error: function is undefined (html/ javascript)

Question

EDIT: Included changes made to the JS file (int i=0 changed to var i= 0, return set in createTH and createTD

HTML FILE (index.html):

<!DOCTYPE html>
<html>

<head>
    <title>Student Schedules</title>
    <link rel="stylesheet" href="styles.css" type="text/css" />
    <script src="loadfile.js" type="text/javascript"></script>
</head>

<body>
    <!--For some reason there is a reference error stating that getFile() is not defined. The code should work perfectly otherwise.-->
    <input type="button" value="Load Marks" onclick="getFile()" />
    <div id="results">
    </div>
</body>

</html>

JAVASCRIPT FILE (loadfile.js)

function createTH(text) {
    return "<th>" + text + "</th>";
}

function createTD(text) {
    return "<td>" + text + "</td>";
}

function createStudentRow(studentID, givenName, surname, midtermMark, finalExamMark, assignmentsMark, projectMark) {
    htmlTable += "<tr>" + createTD(studentID) + createTD(givenName) + createTD(surname) + createTD(midtermMark) + createTD(finalExamMark) + createTD(assignmentsMark) + createTD(projectMark) + "</tr>";
}

function createHeaderRow() {
    htmlTable += "<tr>" + createTH("Student ID") + createTH("Given Name") + createTH("Surname") + createTH("Midterm Mark") + createTH("Final Exam Mark") + createTH("Assignments Mark") + createTH("Project Mark") + "</tr>";
}

function getFile() {
    htmlTable = "<table>";
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
            loadTable(xhttp);
        }
    }
    xhttp.open("GET", "data_source.xml", true);
    xhttp.send();
}

function loadTable(xml) {
    createHeaderRow();

    var xmlDoc = xml.responseXML;

    var studentRecords = xmlDoc.getElementsByTagName("studentRecord");

    for (var i = 0; i < studentRecords.length; i++) {
        var sID = studentRecords[i].getAttribute("sid");
        var name = studentRecords[i].getAttribute("givenName");
        var surname = studentRecords[i].getAttribute("surname");
        var midterm = studentRecords[i].childNodes[0].getAttribute("mark");
        var final = studentRecords[i].childNodes[1].getAttribute("mark");
        var assignments = studentRecords[i].childNodes[2].getAttribute("mark");
        var project = studentRecords[i].childNodes[3].getAttribute("mark");

        createStudentRow(sID, name, surname, midterm, final, assignments, project);
    }

    htmlTable += "</table>";
    document.getElementById("results").innerHTML = htmlTable;
}

XML FILE (data_source.xml):

<marks courseCode="csci3230u" semester="fall2015">
    <studentRecord sid="100000001" givenName="Ahmed" surname="Latif">
        <midterm mark="71.25" />
        <finalExam mark="78.5" />
        <assignments mark="18.0" />
        <project mark="22.5" />
    </studentRecord>
    <studentRecord sid="100000002" givenName="Katherine" surname="Schultz">
        <midterm mark="74.75" />
        <finalExam mark="81.0" />
        <assignments mark="19.5" />
        <project mark="24.0" />
    </studentRecord>
    <studentRecord sid="100000003" givenName="Zhilong" surname="Xu">
        <midterm mark="67.25" />
        <finalExam mark="72.75" />
        <assignments mark="17.5" />
        <project mark="23.5" />
    </studentRecord>
    <studentRecord sid="100000004" givenName="Harley" surname="Mackenzie">
        <midterm mark="54.0" />
        <finalExam mark="58.75" />
        <assignments mark="14.5" />
        <project mark="17.5" />
    </studentRecord>
    <studentRecord sid="100000005" givenName="Loic" surname="Montpellier">
        <midterm mark="72.5" />
        <finalExam mark="64.75" />
        <assignments mark="20.0" />
        <project mark="22.0" />
    </studentRecord>
</marks>

When I press the button on my page I get this error in Chrome's console:

Uncaught SyntaxError: Unexpected identifier loadfile.js:36

index.html:12 Uncaught ReferenceError: getFile is not defined onclick @ index.html:12

Any ideas? <3

Once you fix that problem with int, you're going to find that your code as written won't work. You're calling those createTH and createTD functions as if they return strings, but they don't; they return undefined. — Pointy
– Pointy, Commented Oct 26, 2015 at 14:15
@Pointy Very true. My inexperience with JS is showing! D: Thanks for pointing that out! — Joseph
– Joseph, Commented Oct 26, 2015 at 14:24
@Griffith Same errors as specified at the bottom of the question: When I press the button on my page I get this error in Chrome's console: Uncaught SyntaxError: Unexpected identifier loadfile.js:36 index.html:12 Uncaught ReferenceError: getFile is not defined onclick @ index.html:12 — Joseph
– Joseph, Commented Oct 27, 2015 at 5:49

Griffith · Accepted Answer · 2015-10-26 14:14:12Z

1

int is not a keyword in JavaScript.

Instead of for (int i = 0; i < studentRecords.length; i++) it should be for (var i = 0; i < studentRecords.length; i++)

answered Oct 26, 2015 at 14:14

Griffith

3,2171 gold badge19 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Joseph Over a year ago

Good catch! Unfortunately this doesn't solve the main issue.

Collectives™ on Stack Overflow

Reference Error: function is undefined (html/ javascript)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related