Uncaught SyntaxError: Unexpected identifier at <head>

Question

I'm loading a PHP that uses ajax. At first the page loads with no errors. When I trigger the onclick event on a button i get the error "Uncaught SyntaxError: Unexpected identifier" which is indicated on line two of the php file, which is the HTML head tag.

php file:

<html>
<head>
  <title>Staff Portal</title>
  <link rel="stylesheet" type="text/css" href="Instructor.css">
  <script type="text/javascript" src="InstLessons.js"></script>
</head>
<body onload="loadCourse()">
  <div id="InstHeader">
    <div id="bar">
      <table id="inst_bar_table">
        <tbody><tr>
        <td id="inst_bar_detail"><a href="InstOptions.php">Options</a></td>
        <td id="inst_bar_detail"><a href="logout.php">Logout</a></td><td>
        </td></tr>
      </tbody></table>
  </div><br>
    <h1 id="InstHeaderTitle">Pennco Tech Instructor Portal</h1><h1>
    </h1>
  </div>

  <div id="MainBody">
    <div id="course"><table id="InstClassTable"><tbody><tr><th id="classHeadTbl">Code</th><th id="classHeadTbl">Course</th><th id="classHeadTbl"># Students</th><th id="classHeadTbl">Start Date</th><th id="classHeadTbl">End Date</th></tr><tr><td id="classHeadDetailTbl">GEN 101</td><td id="classHeadDetailTbl">Computer Applications</td><td id="classHeadDetailTbl">7</td><td id="classHeadDetailTbl">05-06-15</td><td id="classHeadDetailTbl">07-07-15</td></tr></tbody></table></div>
    <div id="detailsection">
        <div id="InstMenu">
            <ul id="InstMenuList">
            <li><a href="InstMain.php" id="MenuLink">Select Class</a></li>
            <li><a href="InstAttendance.php" id="MenuLink">Class Attendance</a></li>
            <li><a href="InstClassAssignments.php" id="MenuLink">Class Assignments</a></li>
            <li><a href="InstClassMsgboard.php" id="MenuLink">Message Board</a></li>
            <li><a href="InstClassStudentData.php" id="MenuLink">Student Data</a></li>
            <li><a href="InstClassOverView.php" id="MenuLink">Class Summary</a></li>
            </ul>           
        </div>
    <div id="instLessons">
     <h3><u>Course Lessons</u></h3>
     <br>
        <table id="instLessonTable">
          <tbody>
            <tr>
              <td id="classHeadDetailTbl">Career Services Assignments</td>
              <td id="InstLessonButtonDetail">
                  <button id="InstLessonButton" onclick="getLessons(Career Services Assignments)">Select</button>
              </td>
              </tr>
              <tr><td id="classHeadDetailTbl">Mitchell Final</td>
              <td id="InstLessonButtonDetail"><button id="InstLessonButton" onclick="getLessons(Mitchell Final)">Select</button></td>
              </tr>
              <tr>
              <td id="classHeadDetailTbl">Mitchell Hand-In Assignments</td>
              <td id="InstLessonButtonDetail">
                  <button id="InstLessonButton" onclick="getLessons(Mitchell Hand-In Assignments)">Select</button></td>
              </tr>
              <tr>
              <td id="classHeadDetailTbl">Mitchell Lab Test</td>
              <td id="InstLessonButtonDetail">
                 <button id="InstLessonButton" onclick="getLessons(Mitchell Lab Test)">Select</button>
              </td>
              </tr>
              <tr>
              <td id="classHeadDetailTbl">Mitchell Midterm</td>
              <td id="InstLessonButtonDetail">
                  <button id="InstLessonButton" onclick="getLessons(Mitchell Midterm)">Select</button>
              </td>
              </tr>
              <tr>
              <td id="classHeadDetailTbl">PC</td>
              <td id="InstLessonButtonDetail">
                 <button id="InstLessonButton" onclick="getLessons(PC)">Select</button>
              </td>
              </tr>
            </tbody>
           </table>
         </div>
        <div id="instLessonMenu">
        <br>
        <button id="LessonMenuButton" onclick="SetPercentages()">Set Course Percentages</button><br><br>
        <button id="LessonMenuButton" onclick="newLesson()">New Class Lesson</button><br><br>
        <button id="LessonMenuButton" onclick="DelLesson()">Delete Class Lesson</button><br><br>
        <button id="LessonMenuButton" onclick="IndivLesson()">New Individual Lesson</button><br><br>
        <button id="LessonMenuButton" onclick="DelIndivLesson()">Delete Individual Lesson</button><br><br>
        </div>
    </div>
    </div>

The javascript function on the button onclick event:

function getLessons(lesson){
  if(xmlHttpGetLessons.readyState==4 || xmlHttpGetLessons.readyState == 0){
      var lesson_title = encodeURIComponent(lesson);
      xmlHttpGetLessons.open("GET", 'InstListLessons.php?lesson ="' + lesson_title + '"',true);
      xmlHttpGetLessons.send(null);
      xmlHttpGetLessons.onreadystatechange = LessonGetServerResponse;
  } 
}

lol, yes it does. I'm planning on adding more later, but need to get to that point first. — Gene
Try substituting a simple .php file with <?php echo "Hello World!"; ?> to see if you are encountering an error? — Kirk Powell
I've inserted the PHP into the file and it works normally. The page loads fine the first time, but fails when the button is clicked. — Gene

salathe salathe · Accepted Answer · 2015-05-19T19:22:30

Your JavaScript function calls will cause an Unexpected identifier syntax error.

<button … onclick="getLessons(Career Services Assignments)">

When clicking the button, the following JavaScript is executed and results in the error.

getLessons(Career Services Assignments)

You'll want to make the function argument be a string, in the same way that you normally would in JavaScript; by wrapping the contents in quote characters. (Single quotes chosen, as we'll be embedding the call into a HTML attribute value, which uses double quotes.)

getLessons('Career Services Assignments')

And popping this back in to your HTML:

<button … onclick="getLessons('Career Services Assignments')">

Uncaught SyntaxError: Unexpected identifier at <head>

1 Answers