[JavaScript]ネストしたforEach()メソッド及びイベントリスナーの挙動に関して

Question

最近、JavaScriptを勉強し始めました。
お試しのコードを書いている時に挙動が分からず悩んでいる部分があります。

[状況]

• リスト形式のメニューが3つ並んでいる
• その下にボタンが1つある
• ボタンを押すと、メニュー内の文字列が変更される

[悩んでいること]

• ボタンを押してもすべて「japan」の文字列で更新されてしまう
• リストの左から順番に「taro」「27」「japan」と更新したい
• すべて「japan」と更新されてしまう挙動の流れが分からないため知りたい

以下、コードです。
拙いですがどうかご教授いただけると幸いです。

<ul class="list">
  <li class="list_1"><a href="#">リスト_1</a></li>
  <li class="list_2"><a href="#">リスト_2</a></li>
  <li class="list_3"><a href="#">リスト_3</a></li>
</ul>

<button id="button">文字変換</button>

ul {
  list-style: none;
  display: flex;
}

.list li a {
  text-decoration: none;
  display: block;
  padding: 10px;
  border: 1px solid;
  margin-left:10px; 
}

const listElem = document.querySelectorAll(".list li a");
const button = document.getElementById("button");

const obj = {
  name: 'taro',
  age: '27',
  from: 'japan',
}

listElem.forEach((list) => Object.keys(obj).forEach((key) =>button.addEventListener('click', (evt) => list.textContent = obj[key])));

Comments

[YellowGreen]

> すべて「japan」と更新されてしまう挙動の流れが分からないため知りたい

japanが最後の要素だから最後に上書きするからではないですか？

[mokutaro]

回答ありがとうございます。
イベントリスナーはクリックイベントが発火しないと処理は進まないけど、その前の
Object.keys(obj).forEach()の処理だけが進んで、obj変数は最後のキーを参照してしまっているということなんでしょうか？

[YellowGreen]

既に回答が出てますよね。

Answer 1

たとえばこう

button.addEventListener('click',() =>{
  listElem.forEach((list,idx) =>{
    list.textContent = Object.values(obj)[idx];
  });
});

Comments

[mokutaro]

回答ありがとうございます。
forEach()メソッドはインデックスとかも取得できるんですね！
勉強不足でした・・・。
こちらのコードで解決できました！ありがとうございます