Forum:

HTML Pages with CSS and JavaScript

Why Won't This HTML Code Validate?

Kaydell Leavitt

Ranch Hand

Posts: 694

I like...

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hello,

I'm trying to validate the following code and I get an error for line 57 saying that the <script> tag doesn't belong here, yet the code seems to run OK. What's wrong? Why won't it validate?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lab 9-1: Employee Database</title>

<script language="JavaScript" type="text/javascript"> 
<!--
    
  // Complete the employeeObject constructor
  // Remember to add a method called showEmployee
  function employeeObject(name,department,extension) {
      this.name = name;
	  this.department = department;
	  this.extension = extension;
	  this.showEmployee = showEmployee;
    }
  
      // Instantiate 3 instances of employeeObject
      var employees = new Array();
  employees[0] = "Select Employee";
  employees[1] = new employeeObject("Mai Li", "Sales", 551);
  employees[2] = new employeeObject("Maria Alvarez", "Human Resources", 441);
  employees[3] = new employeeObject("Tom Smith", "Marketing", 331);
  
  len = employees.length;
  
    function showEmployee() {
      var info = "";
      info += "Name: " + this.name + ", ";
	  info += "Department: " + this.extension + ", ";
	  info += "Extension: " + this.department;    
      alert(info);
    }

function showAllEmployees() {
        var info = "";
    for (var i = 1; i < len; i++) {
        info += "Employee: " + employees[i].name + "\n";
        info += "Department: " + employees[i].department +  "\n";
        info += "Extension: " + employees[i].extension + "\n\n";
      }
    
    alert(info);
    }

//-->
</script>
</head>
<body>
<h3>Employee Database</h3>
<hr />
<form action="" name="empForm" id="empForm">
<strong>Select name to view information:</strong> 
<select name="empName" onchange="employees[this.selectedIndex].showEmployee();this.selectedIndex=0;">
<script language="JavaScript" type="text/javascript">
<!--

for (var i = 0; i < len; i++) {
    if(i == 0) document.write("<option>" + employees[i]) + "</option>";
    else document.write("<option>" + employees[i].name) + "</option>";
  }
  
//-->
</script>
</select>
<p>
<input type="button" value="Show All Employees" onclick=
"showAllEmployees();" />
</p>
</form>
</body>
</html>

Eric Pascarello

author

Posts: 15385

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Just a nit pick

should be a label

It is more accessible this way.

Now, what are you using to validate this?

Eric>

Kaydell Leavitt

Ranch Hand

Posts: 694

I like...

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Now, what are you using to validate this?

validator.w3.org

Jeanne Boyarsky

author & internet detective

Posts: 41878

909

I like...

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

It looks like that script should be in an onload function (or jquery or the like equivalent) rather than in the main body of the page between HTML form elements. That way it still runs after the select box is rendered, but is more logically separate.

[OCP 17 book] | [OCP 11 book] | [OCA 8 book] [OCP 8 book] [Practice tests book] [Blog] [JavaRanch FAQ] [How To Ask Questions] [Book Promos]
Other Certs: SCEA Part 1, Part 2 & 3, Core Spring 3, TOGAF part 1 and part 2

Java 8 (verified skill)
Skill verified by Jeanne Boyarsky

JUnit 5 (verified skill)
Skill verified by Jeanne Boyarsky

Consider Paul's rocket mass heater.