# Checkbox listener index

**URL:** <https://discourse.processing.org/t/checkbox-listener-index/28529>\
**Category:** Coding Questions\
**Created:** [March 14, 2021, 12:51pm UTC](https://discourse.processing.org/t/checkbox-listener-index/28529 "2021-03-14T12:51:35Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![xbix](https://avatars.discourse-cdn.com/v4/letter/x/ec9cab/32.png) [@xbix](https://discourse.processing.org/u/xbix)\
**Post date:** [March 14, 2021, 12:51pm UTC](https://discourse.processing.org/t/checkbox-listener-index/28529/1 "2021-03-14T12:51:35Z")

</div>

I have an array of checkboxes and I need to know which checkbox was pressed. My code looks like this:

```auto
uiToogles() {
    var y = 0;
    checkbox = [8];
    for (var x = 0; x < 8; x++) {
      y = x * 20;
      checkbox[x] = createCheckbox(names[x], true);
      checkbox[x].changed(this.myCheckedEvent);
      checkbox[x].position(this.sizex + this.posx + 4, this.posy + y + 12);
    }
  }

  myCheckedEvent() {
    if (this.checked()) {
      console.log("Checking!"); 
    } else {
      console.log("Unchecking!");
    }
  }

```

Thanks a lot!

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [March 14, 2021, 1:45pm UTC](https://discourse.processing.org/t/checkbox-listener-index/28529/2 "2021-03-14T13:45:21Z")

</div>

hi! one way of achieving this is to bind values to a function  
[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global\_objects/Function/bind](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind)

but this is not really intuitive at first. I recommend using anonymous function like

```javascript
checkbox[x].changed(function () {
  console.log(`checkbox ${x} is checked: ${this.checked()}`)
})

```

[https://editor.p5js.org/micuat/sketches/bXhblYmdf](https://editor.p5js.org/micuat/sketches/bXhblYmdf)

note that `function(){}` and `()=>{}` behave differently in terms of the scope and you have to use the former in this case.

---

<div class="post-metadata">

**Author:** ![xbix](https://avatars.discourse-cdn.com/v4/letter/x/ec9cab/32.png) [@xbix](https://discourse.processing.org/u/xbix)\
**Post date:** [March 14, 2021, 2:53pm UTC](https://discourse.processing.org/t/checkbox-listener-index/28529/3 "2021-03-14T14:53:27Z")

</div>

Thanks a lot for your response!

I’m trying to adapt your code to work with an array of boxes, but I can’t get the proper index of the box.

```auto
let c = [8];

function setup() {

  createCanvas(400, 400);
  let x = 1;

  for (var y = 0; y < 8; y++) {
    c = createCheckbox("check" + y);
    c.changed(function() {
      console.log(`checkbox ${x} is checked: ${this.checked()}`)
    })
  }

}

function draw() {
  background(220);
}

```

How would I pass the index instead of the x variable?

Thanks!

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [March 14, 2021, 3:03pm UTC](https://discourse.processing.org/t/checkbox-listener-index/28529/4 "2021-03-14T15:03:12Z")

</div>

oh! it’s so close but that’s not how you initialize an array. I would suggest using

```javascript
let c = [];

...

c.push(createCheckbox("check" + y));
c[x].changed(...)

```

---

<div class="post-metadata">

**Author:** ![xbix](https://avatars.discourse-cdn.com/v4/letter/x/ec9cab/32.png) [@xbix](https://discourse.processing.org/u/xbix)\
**Post date:** [March 14, 2021, 3:30pm UTC](https://discourse.processing.org/t/checkbox-listener-index/28529/5 "2021-03-14T15:30:43Z")

</div>

Thanks again!

I’m doing this now, but the index is still wrong:

```auto
let c = [];

function setup() {

  createCanvas(400, 400);
  let x = 1;

  for (var y = 0; y < 8; y++) {
    c[x] = createCheckbox("check" + y);
    c[x].changed(function() {
      console.log(`checkbox ${x} is checked: ${this.checked()}`)
    })
  }

}

function draw() {
  background(220);
}

```

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [March 14, 2021, 5:10pm UTC](https://discourse.processing.org/t/checkbox-listener-index/28529/6 "2021-03-14T17:10:17Z")

</div>

because the for loop is iterating over `y` but you refer to `x` 🙂

also you need to declare the index (x or y whichever you like) with `let` instead of `var` if you want to use it inside the callback function. If you use `var`, the index will be always 8 because `var` is always in the global scope. If you use `let`, every callback will retain the value (I know it’s so weird!)

and in hindsight it helps a lot if you post a complete sketch (I mean not your complete project but a short sketch that runs and describes your problem) so we can give you advice more effectively. If you can give a link to the web editor that would be even better!

---

<div class="post-metadata">

**Author:** ![xbix](https://avatars.discourse-cdn.com/v4/letter/x/ec9cab/32.png) [@xbix](https://discourse.processing.org/u/xbix)\
**Post date:** [March 15, 2021, 5:12pm UTC](https://discourse.processing.org/t/checkbox-listener-index/28529/7 "2021-03-15T17:12:14Z")

</div>

That makes sense 🙂

Thanks a lot for your time!!!