# Wrong item in the list is triggered, which is weird and not what is intended + contribution

**URL:** https://discourse.processing.org/t/wrong-item-in-the-list-is-triggered-which-is-weird-and-not-what-is-intended-contribution/41136
**Category:** Libraries
**Tags:** contributions
**Created:** [March 4, 2023, 5:56am UTC](https://discourse.processing.org/t/wrong-item-in-the-list-is-triggered-which-is-weird-and-not-what-is-intended-contribution/41136 "2023-03-04T05:56:56Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![woshibide](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/woshibide/32/18054_2.png) [@woshibide](https://discourse.processing.org/u/woshibide)
#### Post date: [March 4, 2023, 5:56am UTC](https://discourse.processing.org/t/wrong-item-in-the-list-is-triggered-which-is-weird-and-not-what-is-intended-contribution/41136/1 "2023-03-04T05:56:56Z")

</div>

I’m trying to build a basic sound sampler, where on each key pressed sound is played

And I have everything working, but with 1 annoying bug:

 ![Screenshot 2023-03-04 at 06.33.57](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/4/6/46da3c8bde8ea4d465390aa8218e3989972f7b39.png)

Whenever item N is pressed, on the screen it triggers N+1, and this bit of code is responsible for it:

```auto
// script.js :: [line 31] 
// https://gitlab.com/woshibide/p5js-sound-sampler/-/blob/master/sketch.js#L31)
    if (this.isPressed) {
      fill(this.color.levels.map(x => x - 50)); // darker shade when pressed
    } else {
      fill(this.color);
    }

```

I tried debugging it ([here](http://p5js-sound-sampler.surge.sh/), if you open console you will find console.log vals on QWEASD keys pressed), but just couldn’t figure out what is wrong with it. Sounds play correctly, buttons trigger corresponded actions. The whole deal is about next item on the list appearing shaded, instead of the desired one

help! i’m new to js and p5js and programming in general

p.s. does this toy have a potential to be contributed to p5js?

---

<div class="post-metadata">

### Author: ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)
#### Post date: [March 4, 2023, 12:48pm UTC](https://discourse.processing.org/t/wrong-item-in-the-list-is-triggered-which-is-weird-and-not-what-is-intended-contribution/41136/2 "2023-03-04T12:48:42Z")

</div>

Hello @woshibide,

> [@woshibide](#):
>
> Whenever item N is pressed, on the screen it triggers N+1

I can’t see your code.

Maybe it is something fundamental such as:  
[https://github.com/processing/p5.js/wiki/JavaScript-basics#data-type-array](https://github.com/processing/p5.js/wiki/JavaScript-basics#data-type-array)

Which states:

> You can access items in the array by numeric index; the first item in an array has index 0.

A 10 element array has elements from 0 to 9.

Try subtracting 1 from N.

`:)`

---

<div class="post-metadata">

### Author: ![woshibide](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/woshibide/32/18054_2.png) [@woshibide](https://discourse.processing.org/u/woshibide)
#### Post date: [March 4, 2023, 12:54pm UTC](https://discourse.processing.org/t/wrong-item-in-the-list-is-triggered-which-is-weird-and-not-what-is-intended-contribution/41136/3 "2023-03-04T12:54:56Z")

</div>

Hi! Yes, I see, thank you for resource

This is my first question here, i provided gitlab repo with anchor link straight to the pain point, as well as working version avaialable on surge. Is it not the way how it is done? How do I provide code which is like 150 lines?

---

<div class="post-metadata">

### Author: ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)
#### Post date: [March 4, 2023, 3:58pm UTC](https://discourse.processing.org/t/wrong-item-in-the-list-is-triggered-which-is-weird-and-not-what-is-intended-contribution/41136/4 "2023-03-04T15:58:49Z")

</div>

Hi @woshibide,

as your code is js you can provide it by s.th like [p5js webeditor](https://editor.p5js.org/)…

the page provided above isn’t working, at least on my access …

> [@glv](#):
>
> I can’t see your code.

but code could be accessed here: [http://p5js-sound-sampler.surge.sh/sketch.js](http://p5js-sound-sampler.surge.sh/sketch.js)

Cheers  
— mnse

---

<div class="post-metadata">

### Author: ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)
#### Post date: [March 4, 2023, 6:46pm UTC](https://discourse.processing.org/t/wrong-item-in-the-list-is-triggered-which-is-weird-and-not-what-is-intended-contribution/41136/5 "2023-03-04T18:46:29Z")

</div>

Hello @woshibide,

I got started by examining the indexes and responses:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/3/0/30495238b4eef40764c46bb52b0d88c66a7a2fb9.png)

The above worked and I did the same for the keypresses.

A runnable link to your original code from which I was able to view the source and extract the _sketch.js_:

[https://p5js-sound-sampler.surge.sh/index.html](https://p5js-sound-sampler.surge.sh/index.html)  
[https://p5js-sound-sampler.surge.sh/sketch.js](https://p5js-sound-sampler.surge.sh/sketch.js)

Next step would be to examine the code to align the indexes in the current _draw()_ cycle.

Try rearranging the order of code in _draw()_ in your _samplerTab class_:

1. _if(this.isPressed)_ should come first
2. Then draw the buttons.

I know what [surge](https://surge.sh/) is now!

`:)`
