Implementing Strategy Design Pattern Using Buttons

JavaScript
6

If I comment out myList2, the first button works just fine. The compiler is giving me the errors

SyntaxError: missing { before class body
ReferenceError: CreateList is not defined

Below is my page markup

<!doctype html>
<head>
<meta charset="UTF-8">
<title> Testing Strategy Pattern </title>
<style>

   #Buttons{width:100%; height:50px; text-align:center}
   buttons{width:10%; height:50px; text-align:center}
   #DisplayArea{
     width:100%; height:200px;    
   }

   ul{ width:100%; height:100%; margin:0 auto; 
       padding:0; text-align:center; list-style:none;
   }

   ul li{ width:25%; height:20%; 
          margin:2%;
          font-size:24px;
          color:white; background:black;
          display:inline-block;
          line-height:35px;
   }

</style>
<script>

var List = function (_list, identifier) {
    'use strict';
    this.list = _list;
    this.identifier = identifier;
}

List.prototype.GetList = function () {
    return this.list();
}

var myList1 = function (identifier){
    // create List1   
    return "<ul id='" + identifier + "'><li>Test1</li><li>Test1</li></ul>";
}

var myList2 = function (identifier) {
    // create List2
    return "<ul class='" + identifier + "'><li>Test2</li><li>Test2</li></ul>";
}

function CreateList (myList, identifier) {
    var newlist = new List (myList, identifier);
    var div = document.getElementById ("DisplayArea");
    div.innerHTML = "";
    div.innerHTML = newlist.GetList (identifier);
}
</script>
</head>
<body>
<div id="Buttons">
<button onclick="CreateList(myList1, 'List1')"> Create List1
</button>
<button onclick="CreateList(myList2, 'class1')"> Create List2
</button>
</div>
<div id = "DisplayArea">
<div>
</body>
</html>