【JavaScript】forEachを用いてDOM操作で作成した要素たちにイベントハンドラーをかける

やりたいこと

①配列の中身である値をforEachで取り出し、値を反映させた<li>要素を作成する。
②<li>要素をクリックすると、値を反映した処理を行う

詰まったポイント

①単純にli要素にaddEventListenerをかけても、それぞれの値を反映した処理をしてくれない

②親要素（<ul>）にイベントハンドラをかけても、それぞれの値を反映した処理をしてくれない

実装

＜ポイント＞
forEachで要素を作成する時に、それぞれのaddEventListenerの処理も記述する！

例）
配列の中身をリストとして表示させる。
リストをクリックすると、表示されている値に応じて奇数か偶数か判定する。

const numbers = [1, 2, 3, 4, 5];

numbers.forEach(number => {
  const li = document.createElement('li');
  li.appendChild(number);

  li.addEventListener('click', () => {
     if(number % 2 === 0){
        console.log('偶数')
　　}else{
        console.log('奇数')
　　}
　})
}