# How to add/push a new object to array upon mouse click in p5.js

**URL:** <https://discourse.processing.org/t/how-to-add-push-a-new-object-to-array-upon-mouse-click-in-p5-js/8043>\
**Category:** Beginners\
**Created:** [February 2, 2019, 3:17pm UTC](https://discourse.processing.org/t/how-to-add-push-a-new-object-to-array-upon-mouse-click-in-p5-js/8043 "2019-02-02T15:17:27Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![blkpanther](https://avatars.discourse-cdn.com/v4/letter/b/d9b06d/32.png) [@blkpanther](https://discourse.processing.org/u/blkpanther)\
**Post date:** [February 2, 2019, 3:17pm UTC](https://discourse.processing.org/t/how-to-add-push-a-new-object-to-array-upon-mouse-click-in-p5-js/8043/1 "2019-02-02T15:17:27Z")

</div>

I have this code to add a new ball to the array but strangely it doesn’t work.

```auto
let balls = [];
let num_balls = 1;
let w = 800;
let h = 600;

function setup() {
    createCanvas(w, h);
    for (let i = 0; i < num_balls; i++) {
        balls[i] = new ball(100 * i, 100);
    }
}

function draw() {
    background(0);

    for (let i = 0; i < num_balls; i++) {
        balls[i].display();
    }
}

function mousePressed() {
    let myball = new ball(mouseX, mouseY)
    balls.push(myball);
}

class ball {
    constructor(tempX, tempY) {
        this.x = tempX;
        this.y = tempY;

    }

    display() {
        ellipse(this.x, this.y, 100, 100);
    }

}

```

Anything amiss here? Got really puzzled. Thanks in advance.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [February 2, 2019, 3:54pm UTC](https://discourse.processing.org/t/how-to-add-push-a-new-object-to-array-upon-mouse-click-in-p5-js/8043/2 "2019-02-02T15:54:35Z")

</div>

[Beautifier.io](http://Beautifier.io)

```javascript
function draw() {
  background(0);
  for (const b of balls) b.display();
}

```

---

<div class="post-metadata">

**Author:** ![blkpanther](https://avatars.discourse-cdn.com/v4/letter/b/d9b06d/32.png) [@blkpanther](https://discourse.processing.org/u/blkpanther)\
**Post date:** [February 2, 2019, 5:41pm UTC](https://discourse.processing.org/t/how-to-add-push-a-new-object-to-array-upon-mouse-click-in-p5-js/8043/3 "2019-02-02T17:41:03Z")

</div>

Thanks for both the loop and linter! It works really well.

Do you know why using balls.length in the loop doesn’t work?

`for ( let i = 0; i<balls.length; i++) b.display();`

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [February 2, 2019, 5:57pm UTC](https://discourse.processing.org/t/how-to-add-push-a-new-object-to-array-upon-mouse-click-in-p5-js/8043/4 "2019-02-02T17:57:25Z")

</div>

> [@blkpanther](#):
>
> Do you know why using _balls.length_ in the loop doesn’t work?

You were NOT using _balls.length_ but `num_balls` instead! 🧐

`for (let i = 0; i < num_balls; i++) {`

---

<div class="post-metadata">

**Author:** ![blkpanther](https://avatars.discourse-cdn.com/v4/letter/b/d9b06d/32.png) [@blkpanther](https://discourse.processing.org/u/blkpanther)\
**Post date:** [February 2, 2019, 6:05pm UTC](https://discourse.processing.org/t/how-to-add-push-a-new-object-to-array-upon-mouse-click-in-p5-js/8043/5 "2019-02-02T18:05:41Z")

</div>

Later on I changed to balls.length and still doesn’t work…

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [February 2, 2019, 6:29pm UTC](https://discourse.processing.org/t/how-to-add-push-a-new-object-to-array-upon-mouse-click-in-p5-js/8043/6 "2019-02-02T18:29:36Z")

</div>

`for (let i = 0; i < balls.length; ++i) b.display();` is wrong! 😱

Correct is `for (let i = 0; i < balls.length; ++i) balls[i].display();` 🤓

Other options: 🕶

- `for (const b of balls) b.display();`
- `balls.forEach(b => b.display());`