How do I change the values of variables inside functions in Javascript?

Question

I'm trying to do more OOP in Javascript. One thing i can't figure out is how can i modify a variable inside an object from another function?

Here's how I tried to do it:

function Ball(){
    radius = 5;
    Y = 20;
    X = 25; // The value i would like to change.
    ctx.arc(this.X, this.Y, this.radius, 0, Math.PI*2, true);
    ctx.fillStyle = '#00ff00';
    ctx.fill();
}

function draw(){
    Player();
    Ball();
}

function update(){
    ctx.clearRect(0, 0, 800, 400);
    draw();
    Ball.X++;  // This is where i want to modify the value.

}

So far I've only been able to do it if I define X as a global variable, but I dont want to do that since there are other X and Y values.

So how would i access the variable from outside the function?

EDIT: The solution provided by "nnnnnn" worked to an extent, it changes the X value but I ran into another problem. My clearRect doesnt clear the animation, so instead of a ball it draws a line that just grows.

This is what the code looks like right now:

function Ball(){
    this.radius = 5;
    this.Y = 20;
    this.X = 25;
    this.draw = function() {
       ctx.arc(this.X, this.Y, this.radius, 0, Math.PI*2, true);
       ctx.fillStyle = '#00ff00';
       ctx.fill();
    };
}

var ball = new Ball();

function draw(){
    Player();
    ball.draw();
}


function update(){
    ctx.clearRect(0, 0, 800, 400);
    draw();
    ball.X++;
}

I have tried moving it around, placing it both in the draw() and ball.draw() functions, but still getting the same result, I also tried doing a fillRect instead of clear but it didnt help. Anyone able to see whats wrong?

no bad feelings, but I'd rather learn to walk before running. Your code looks not very ambitious. Your're not dealing with an instance/object, you're just having variables (not even local ones) in a function there. — jAndy
– jAndy, Commented Mar 16, 2012 at 10:56
yeah they used to be this.X and this.Y etc but since those are local i tried to make em globally changeable :D — justanotherhobbyist
– justanotherhobbyist, Commented Mar 16, 2012 at 12:16

nnnnnn · Accepted Answer · 2012-03-16 11:25:49Z

2

"So far I've only been able to do it if I define X as a global variable"

Actually your variables radius, X and Y variables are all global variables. For them to be properties of an object they need to be set as follows:

someObject.radius = 5;
// OR
someObject["radius"] = 5;

They're not local variables within the Ball() function because they're not declared with var - any variables that you assign a value to without declaring them with var automatically become global.

Your Ball() function is not creating an object when you call it - in order for it to do so you need to use new:

var ball = new Ball();

If you call it with new then JS automatically creates a new instance of Ball and within the function this refers to that new instance. So the function should say:

function Ball(){
    this.radius = 5;
    this.Y = 20;
    this.X = 25; // The value i would like to change.
    ctx.arc(this.X, this.Y, this.radius, 0, Math.PI*2, true);
    ctx.fillStyle = '#00ff00';
    ctx.fill();
}

Then you can access and change properties as follows:

var ball = new Ball();
alert(ball.X); // 25
ball.X++;

However that doesn't really fit with the way you've structured your code because you're trying to call Ball() to make it draw itself. You probably want something more like this:

function Ball(){
    this.radius = 5;
    this.Y = 20;
    this.X = 25;
    this.draw = function() {
       ctx.arc(this.X, this.Y, this.radius, 0, Math.PI*2, true);
       ctx.fillStyle = '#00ff00';
       ctx.fill();
    };
}

var ball = new Ball();

function draw(){
    Player();
    ball.draw();
}

function update(){
    ctx.clearRect(0, 0, 800, 400);
    draw();
    ball.X++;
}

answered Mar 16, 2012 at 11:25

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

justanotherhobbyist Over a year ago

Thank you, that worked :). I tried something similar earlier but couldnt get it to run. I still get one problem though, the clearRect doesnt work, so instead of a 5 radius ball it draws a line that just gets longer and longer. Where should I put my clearRect?

nnnnnn Over a year ago

I'm not sure - I would think if you always call .clearRect() just before draw() within the update() function that should do it. Can you post a demo to jsfiddle.net?

tuff · Accepted Answer · 2012-03-16 10:55:56Z

0

Inside the Ball function, use this.X = 25;. Then, when you instantiate Ball, you can do

var ball = new Ball();
ball.X++;

More info here: OOP in JS, Part 1 : Public/Private Variables and Methods.

answered Mar 16, 2012 at 10:55

tuff

5,1936 gold badges31 silver badges43 bronze badges

Comments

Software Engineer · Accepted Answer · 2012-03-16 10:56:12Z

0

Create an instance of type Ball, use its reference to modify instance variables.

function update(){
    ctx.clearRect(0, 0, 800, 400);
    draw();
    var objBall = new Ball();
    objBall.X++
}

answered Mar 16, 2012 at 10:56

Software Engineer

3,9861 gold badge28 silver badges35 bronze badges

1 Comment

Henry Over a year ago

This requires a this.X = 25; in Ball

Shaoz · Accepted Answer · 2012-03-16 11:35:39Z

There are several ways to do that. First you can use the contructor way by adding this keyword at the front of the variable you want to use outside. Like this:

function Ball(){
  this.radius = 5;
  this.Y = 20;
  this.X = 25; // The way you wanted.

  ctx.arc(this.X, this.Y, this.radius, 0, Math.PI*2, true);
  ctx.fillStyle = '#00ff00';
  ctx.fill();
}

//call it like this 
Ball.X;
Ball.Y;
Ball.radius;

//or inside an assigned variable which is instantiated with 'new' keyword:
var myVar = new Ball(); 
myVar.X;
myVar.Y;
myVar.radius;

or use object notation, like this:

var Ball = {
  radius: 5,
  Y: 20,
  X: 25,

  someFunction: function() {
    //Even in here use 'this' to refer to any property of the object 'Ball', like this:
    var product = this.radius * this.X;

    return product + this.Y
  }

};

//call it also this way
Ball.X;

//or
Ball.radius;

//or
Ball.someFunction();

Now use it anywhere:

function update(){
  //Now you can use it anywhere
  var smallBall = new Ball();
  smallBall.X++;
}

So if you want to make a property to belong to an object use this in a constructor or just use the object notation method. Your choice of techniques depends on what you want to do in your project. Also if you want to hide any property (i.e variables, function, etc) in an object, use the var keyword so that the property won't be global.

Collectives™ on Stack Overflow

How do I change the values of variables inside functions in Javascript?

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related