# loopの中のfunction

**URL:** <https://community.cybozu.dev/t/topic/2423>\
**Category:** kintone 開発相談\
**Created:** [2016 年 2 月 14 日午後 3:18 UTC](https://community.cybozu.dev/t/topic/2423 "2016-02-14T15:18:09Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account2979](https://avatars.discourse-cdn.com/v4/letter/l/f4b2a3/32.png) [@Legacy\_Account2979](https://community.cybozu.dev/u/Legacy_Account2979)\
**Post date:** [2016 年 2 月 14 日午後 3:18 UTC](https://community.cybozu.dev/t/topic/2423/1 "2016-02-14T15:18:09Z")

</div>

ボタンをJavaScriptで作成し、処理をクリック時のfunctionで書いています。そのボタンをfor文で複数作ろうとすると、構文エラーで以下のようなメッセージが出力されます。

Don’t make functions within a loop.

書き方の作法はありますか。

&nbsp;

for (var i=0;i\<5;i++) {

` ``// 任意のスペースフィールドにボタンを設置`

` ``var` `mySpaceFieldButton = document.createElement(``'button'``);`

` ``mySpaceFieldButton.id = ``'my_space_field_button' + i``;`

` ``mySpaceFieldButton.innerHTML = ``'スペースボタン'``;`

` ``mySpaceFieldButton.onclick = ``function` `() {`

` ``window.alert(``'スペースフィールド'``);`

` ``}`

`kintone.app.record.getSpaceElement(``'my_space_field' + i``).appendChild(mySpaceFieldButton);`

`}`

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2115](https://avatars.discourse-cdn.com/v4/letter/l/e9bcb4/32.png) [@Legacy\_Account2115](https://community.cybozu.dev/u/Legacy_Account2115)\
**Post date:** [2016 年 2 月 14 日午後 3:48 UTC](https://community.cybozu.dev/t/topic/2423/2 "2016-02-14T15:48:23Z")

</div>

Toshimichi Konnoさん

```
mySpaceFieldButton.onclick = function () {
window.alert('スペースフィールド');
}

```

の部分を

```
mySpaceFieldButton.addEventListenner("click", function () {
window.alert('スペースフィールド');
});

```

に変更して実行すれば解決するかと思います。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2979](https://avatars.discourse-cdn.com/v4/letter/l/f4b2a3/32.png) [@Legacy\_Account2979](https://community.cybozu.dev/u/Legacy_Account2979)\
**Post date:** [2016 年 2 月 15 日午前 1:11 UTC](https://community.cybozu.dev/t/topic/2423/3 "2016-02-15T01:11:11Z")

</div>

```
addEventListennerの方法に書き換えてみましたが、やはり同じメッセージが出ます。

```

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2115](https://avatars.discourse-cdn.com/v4/letter/l/e9bcb4/32.png) [@Legacy\_Account2115](https://community.cybozu.dev/u/Legacy_Account2115)\
**Post date:** [2016 年 2 月 15 日午前 1:53 UTC](https://community.cybozu.dev/t/topic/2423/4 "2016-02-15T01:53:43Z")

</div>

Toshimichi Konnoさん

それであれば、ループ内で定義している関数をループ外に出してしまえばよいかと思います。

それぞれの関数ごとに処理を変えるのであればクロージャー関数(関数をreturnする関数)をループ外に定義すれば良いと思います。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2979](https://avatars.discourse-cdn.com/v4/letter/l/f4b2a3/32.png) [@Legacy\_Account2979](https://community.cybozu.dev/u/Legacy_Account2979)\
**Post date:** [2016 年 2 月 15 日午前 4:07 UTC](https://community.cybozu.dev/t/topic/2423/5 "2016-02-15T04:07:10Z")

</div>

自己解決したので報告します。

メッセージに関してはワーニングなので、出てても実行自体は出来ました。

やりたかったことは複数のボタンを配置してどのボタンを押したか認識したかったのですが、以下の方法で簡単に実現できました。

まず各ボタンに格納したい値をvalueプロパティに設定します。

mySpaceFieldButton.value = 9999;

取り出す方法としてはjqueryの記法で以下のようにやりました。

window.alert($(this).val());