<meta charset="UTF-8"> <title>Title</title> <ul id="list"> </ul> <script>   maxLength = 4;   list = document.querySelector('#list');   function processName(name) {     return {       firstName: name[0],       lastName: name[1],       getFullName() {         return this.firstName + ' ' + this.lastName;       },     };   }     var names = [     ['Gregor', 'Bachmann'],     ['Anita', 'Bruns'],     ['Anke', 'Dorn'],     ['Ulrich', 'Koch'],     ['Dietrich', 'Riedl'],     ['Wolfgang', 'Jahn'],     ['Gesine', 'Sturm'],     ['Theodor', 'Petersen'],   ];     var validCount = 0; for (var i = 0; i < names.length; i += 1) {     var flag1 = names[i][0].indexOf('A') !== 0;     var getFullName;     if (flag1 && names[i][0].length >= 4) {       getFullName = processName(names[i]).getFullName;       var lastName = processName(names[i]).lastName;       var firstName = processName(names[i]).firstName;       var span = document.createElement('li');       var textNode = document.createTextNode(i + 1 + '. ' + getFullName());       span.appendChild(textNode);             span.addEventListener('click', function (e) {        var arr=e.target.innerText.split(" ")       var index=arr[0].substring(0,arr[0].length-1)       var  firstName=arr[1]       var lastName=arr[2]         console.log('click on no.' + index + ' ' + firstName + ',' + lastName);       });              if (validCount + 1 > maxLength) {         continue;       }       validCount += 1;       list.appendChild(span);     }   } </script>