[解決済み] addEventListener と getElementsByClassName を使って要素 id を渡す。

質問

JSONファイルから項目のリストを定義し、そのリストをウェブページに表示しています。ユーザーがリストの項目をクリックすると、その項目に関する詳細情報（同じJSONファイルに保持されている情報）が表示されるようにするためです。

このリストのすべての項目は同じクラスのメンバーであり、それぞれはJSONファイルから定義された一意のIDを持っています。HTMLは以下のような感じです。

<ul>
   <li class="menu" id="bob">Robert Smith</li>
   <li class="menu" id="jane">Jane Doe</li>
   <li class="menu" id="sue">Susan Carter</li>
</ul>

というようなものを使おうと思っていました。

var userSelection = document.getElementsByClassName('menu');

とともに

userSelection.addEventListener('click', myFunctionToPrintDetails());

が、どの詳細を印刷するかを決定するために、イベントリスナーからprint関数にidをどのように渡せばよいのかがわかりません。

私はHTML/CSSの経験は豊富ですが、JSON/AJAXの経験はほとんどないので、おそらく私はこのことについて完全に基本的に逆行しています。もしこれを行うためのより適切な方法があれば、私はフィードバックにオープンです。

両方の回答を試しましたが、どちらもうまくいきませんでした。userSelection.lengthをコンソールにログ出力すると0、userSelectionをログ出力すると...。

HTMLCollection(0)
> sue: li#sue.menu
length: 3
> jane: li#jane.menu
> bob: li#bob.menu
> 0: li#bob.menu
> 1: li#jane.menu
> 2: li#sue.menu

解決方法は？

コードペンデモ

var userSelection = document.getElementsByClassName('menu');

for(var i = 0; i < userSelection.length; i++) {
  (function(index) {
    userSelection[index].addEventListener("click", function() {
       console.log("Clicked index: " + index);
     })
  })(i);
}

コメントで @torazaburo さんが指摘しているように、対応したいブラウザが JavaScript の最新版である ECMAScript 6 (ES6) に準拠している場合は、以下を利用することができます。

var userSelection = document.getElementsByClassName('menu');

for(let i = 0; i < userSelection.length; i++) {
  userSelection[i].addEventListener("click", function() {
    console.log("Clicked index: " + i);
  })
}