# Sliders in For Loops

**URL:** <https://discourse.processing.org/t/sliders-in-for-loops/7629>\
**Category:** Coding Questions\
**Created:** [January 18, 2019, 10:32pm UTC](https://discourse.processing.org/t/sliders-in-for-loops/7629 "2019-01-18T22:32:34Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![PringleCanMan](https://avatars.discourse-cdn.com/v4/letter/p/5f8ce5/32.png) [@PringleCanMan](https://discourse.processing.org/u/PringleCanMan)\
**Post date:** [January 18, 2019, 10:32pm UTC](https://discourse.processing.org/t/sliders-in-for-loops/7629/1 "2019-01-18T22:32:34Z")

</div>

Hello, I am currently working on a small idea here. It involves ellipses that move across the canvas and are put in an array. A constructor function makes the ellipses with random x, y, and speed. I am trying to adjust the amount of stars that are on the screen with a slider. The amount of stars are controlled by a variable called “starAmount”. I am trying to set the value of star amount to a slider value, but it gives me errors:

Uncaught TypeError: Cannot read property ‘value’ of undefined (sketch: line 8)  
Uncaught ReferenceError: starAmount is not defined (sketch: line 12)

Can I not assign a variable to have the value of a slider that is located in a for loop?

I am new to the javascript language and p5js, so if you could keep the terminology lite it would be much appreciated.

```javascript
// This array holds our points (stars)
let stars = [];
// Slider for background color
let bgSlider;
// Slider for Star Amount
let saSlider;
// Declare an slider varaible;
let starAmount = saSlider.value();

function setup() {
  createCanvas(400, 400);
  for (let i = 0; i < starAmount; i++) {
    stars[i] = new StarConst();
  }
  // Slider for star amount
  saSlider = createSlider(0, 1000, 0);
  saSlider.position(200, 410);
  // Slider for background color
  bgSlider = createSlider(0, 255, 0);
  bgSlider.position(0, 410);
}

function draw() {
	let bgColorSL = bgSlider.value();
  background(bgColorSL);
  frameRate(60);
  // starObj.placement();
  for (let i = 0; i < starAmount; i++) {
    stars[i].star();
    stars[i].movement();
  }
}

function StarConst() {
  this.x = Math.random() * 100 - 100;
  this.y = Math.random() * height;
  this.sp = Math.random() * 5 + 2;
  this.sz = (Math.random() * 20) + 5;

  this.movement = function() {
    this.x += this.sp;
    if (this.x > width + 50) {
      this.x = Math.random() * 100 - 100;
    }
  }

  this.star = function() {
    fill(255, 255, 0);
    ellipse(this.x, this.y, this.sz);
  }
}

```

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [January 18, 2019, 11:08pm UTC](https://discourse.processing.org/t/sliders-in-for-loops/7629/2 "2019-01-18T23:08:28Z")

</div>

Read through your code line by line to understand what it’s doing. Start here:

```auto
let saSlider;

```

At this point you’ve **declared** a variable, but you haven’t set it to any value. So its value is `undefined`. You can confirm this by printing its value to the console:

```auto
console.log(saSlider);

```

Then you do this:

```auto
let starAmount = saSlider.value();

```

You’re trying to call the `value()` function on a variable that doesn’t have a value yet. That’s why you’re getting an error.

I think you probably want to change your code so `starAmount` has some default value. Then you’d want to add a listener to your slider, or somehow redraw your scene when the user adjusts the slider.