<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>