Here are some proposed improvements to your code.
Replace inline event listeners with standard event listeners
The event listeners should never be assigned from the HTML code. There are several reasons for this, but two of the main ones that come to mind are that you want people to be able to edit the HTML code without putting the scripting at risk, and it’s easier to manage large numbers of items when it’s not directly tied into the HTML code.
<div id="Buttons">
<button>Create List1</button>
<button>Create List2</button>
</div>
The below script I’ll put into a separate script tag at the end of the body, just before the </body> tag. This is a good practice as it allows the script to most quickly and easily work with DOM elements on the page.
var buttons = document.querySelectorAll("#Buttons button");
buttons[0].addEventListener("click", function () {
CreateList(myList1, 'List1');
});
buttons[1].addEventListener("click", function () {
CreateList(myList2, 'class1');
});
Simplify the event handlers
The HTML code became simpler, and now the scripting code needs to be made simpler too. This can be easily achieved by putting the arguments into an array.
var buttonList = [
{name: "List1", callback: myList1},
{name: "class1", callback: myList2}
];
var buttons = document.querySelectorAll("#Buttons button");
buttons.forEach(function (button, index) {
var list = buttonList[index];
button.addEventListener("click", buttonClickHandlerfunction () {
CreateList(list.callback, list.name);
});
});
Move the scripting code to the end of the body
The other parts of the script that are currently in the head I’ll move down to the end of the body too.
<script>
// code moved down below
</script>
</head>
<body>
...
<script>
// code moved into here
...
</script>
</body>
The scripting code is now all together:
var List = function (_list, identifier) {
...
div.innerHTML = newlist.GetList (identifier);
}
var buttonList = [
...
});
});
Use correct naming conventions
Functions with a capital first letter are normally reserved for constructor functions, so this is a good time to rename the function to createList instead.
// function CreateList (myList, identifier) {
function createList (myList, identifier) {
...
// CreateList(list.callback, list.name);
createList(list.callback, list.name);
The List function and the other functions should also be declared as function declarations instead of function expressions, as the anonymous function expression version tends to result in more confusion and no significant benefits otherwise.
// var List = function (_list, identifier) {
function List(_list, identifier) {
Proper use of “use strict”
The “use strict” currently only applies to the List function. Move it out to a containing function to gain the full benefits of using “use strict”. In this case, I’ll use an IIFE (an Immediately Invoked Function Expression) which is a good practice to use, as it helps to protect the global namespace from your code, and it’s easier to later on modularize code.
(function iife() {
"use strict";
// all scripting code in here
}());
Removing underscore prefix
Using the underscore prefix is a bad practice that’s brought over from other programming languages. JavaScript knows what you mean without the prefix.
// function List(_list, identifier) {
function List(list, identifier) {
// this.list = _list;
this.list = list;
this.identifier = identifier;
}
Directly invoke the function
Looking at the the createList() function where the List() function is used, big gains can be achieved here.
function createList(myList, identifier) {
var newlist = new List (myList, identifier);
var div = document.getElementById ("DisplayArea");
div.innerHTML = "";
div.innerHTML = newlist.GetList(identifier);
}
The GetList function just invokes the myList variable, so we can replace all of that code instead with just an invocation of the myList variable.
function createList(myList, identifier) {
var div = document.getElementById ("DisplayArea");
div.innerHTML = myList(identifier);
}
This has helped to demonstrate that in your current usage, there’s absolutely no need for the strategy design pattern.
All of the List() function code can now be removed, and the code still works fine.
// function List(list, identifier) {
// this.list = list;
// this.identifier = identifier;
// }
// List.prototype.GetList = function () {
// return this.list();
// }
Use function declarations for functions
The other myList1 and myList2 functions can be defined as function declarations too, to help remove any questions about why they were defined as anonymous functions instead.
// var myList1 = function (identifier){
function myList1(identifier){
return "<ul id='" + identifier + "'><li>Test1</li><li>Test1</li></ul>";
}
// var myList2 = function (identifier){
function myList2(identifier) {
return "<ul class='" + identifier + "'><li>Test2</li><li>Test2</li></ul>";
}
Place configurable data on the HTML elements themself
Can we entirely remove that buttonList array that’s currently managing things? What if we had the data on the elements themself?
<div id="Buttons">
<button data-id="List1">Create List1</button>
<button data-class="class1">Create List2</button>
</div>
The scripting code can now check that those data attributes exist, and call the appropriate function:
// var buttonList = [
// {name: "List1", callback: myList1},
// {name: "class1", callback: myList2}
// ];
var buttons = document.querySelectorAll("#Buttons button");
// buttons.forEach(function (button, index) {
buttons.forEach(function (button) {
// var list = buttonList[index];
// button.addEventListener("click", function () {
button.addEventListener("click", function (evt) {
// createList(list.callback, list.name);
var el = evt.target;
if (el.dataset.id) {
createList(myList1, el.dataset.id);
} else if (el.dataset.class) {
createList(myList2, el.dataset.class);
}
});
});
The role that those myList1() and myList2() functions play now becomes much more apparent, to the point where you might want to rename them to something more specific, such as showIdList() and showClassList() instead, but the code is much improved now over what it was before.
Use a separate event handler function
We can now also move the eventHandler code out to a separate function, which helps to simplify the event handling process.
function buttonClickHandler(evt) {
...
}
var buttons = document.querySelectorAll("#Buttons button");
buttons.forEach(function (button) {
/* button.addEventListener("click", function (evt) {
...
}); */
button.addEventListener("click", buttonClickHandler);
});
After the improvements
After that HTML code improvement, the JavaScript code is now much simplified, with the full scripting code being:
(function iife() {
"use strict";
function myList1(identifier) {
return "<ul id='" + identifier + "'><li>Test1</li><li>Test1</li></ul>";
}
function myList2(identifier) {
return "<ul class='" + identifier + "'><li>Test2</li><li>Test2</li></ul>";
}
function createList(myList, identifier) {
var div = document.getElementById("DisplayArea");
div.innerHTML = myList(identifier);
}
function buttonClickHandler(evt) {
var el = evt.target;
if (el.dataset.id) {
createList(myList1, el.dataset.id);
} else if (el.dataset.class) {
createList(myList2, el.dataset.class);
}
}
var buttons = document.querySelectorAll("#Buttons button");
buttons.forEach(function (button) {
button.addEventListener("click", buttonClickHandler);
});
}());
I put together a jsfiddle example showing this simplified and easier to understand code at https://jsfiddle.net/83yuy0e5/4/