JavaScript: forEachで作った3つめのボタンだけ他と違う属性値をつけたいです

Question

前提・実現したいこと

JavaScriptでボタンを3つ作り、3つ目のボタンだけ別のイベントリスナーにレンダリングするために別のsetAttributeをつけたいのです。redとブルーが押された時には、getResultが発動するようにしたいのですが、3つ目のgreenが押された時には別のfunctionを発動したいです。このようにしたい場合、forEach内でどのようにsetAttributeを書けば良いかご教授頂けたら嬉しいです。

該当のソースコード

 colors=["red", "blue", "green"];
  
  colors.forEach(rendereEls= (color) => {
  let btn = document.createElement("button");
  let text = document.createTextNode(color);
  btn.append(text);
  btn.setAttribute("onclick", `getResult("${color}")`);
  let container = document.getElementById("buttons");
  container.append(btn);

});

Comments

[m.ts10806]

html,cssも提示してください。
コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564

[m.ts10806]

greenだったら、もしくはindex直指定で分岐させれば良いのでは？

Answer 1

なるほどの〜

3つ目のボタンだけ別のイベントリスナーに

したいとゆうことやね。
であれば、colors.forEachの引数に渡す関数の第2引数に、index を追加して、

colors.forEach((color, index) => {
　　　・・・
}

としておくとindex に何番目のcolorの処理かのインデクスが入ってくるので、これ使うとええよ。0始まりなので

3つ目

やったら、「indexが２の場合はこうする、他の場合はこうする」というコードを書けばええ。

例、挙げときますぅ〜 ➡ サンプル
この例では、

• red と blue のボタンは、helloWorld　によって作られた関数がクリック時に呼ばれ、
• green のボタンは、goodBye　によって作られた関数がクリック時に呼ばれる。

というものになっとって、どこで indexを使って、3番目とそれ以外の区別をしているかというと、以下の行んとこです。

const getResult = index === 2 ? goodBye : helloWorld;

Comments

[退会済みユーザー]

分かりやすい解説ありがとうございました。助かりました。