CODEWITHSUNDEEP
javascripthtmlonclick
Joseph
Joseph

Reputation: 11

Reference Error: function is undefined (html/ javascript)

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

Upvotes: 1

Views: 326

Answers (1)

Griffith
Griffith

Reputation: 3217

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++)

Upvotes: 1

Related Questions