CODEWITHSUNDEEP
javascriptoop
justanotherhobbyist
justanotherhobbyist

Reputation: 2190

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

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?

Upvotes: 1

Views: 551

Answers (4)

Shaoz
Shaoz

Reputation: 10653

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.

Upvotes: 0

nnnnnn
nnnnnn

Reputation: 150080

"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++;
}

Upvotes: 2

Software Engineer
Software Engineer

Reputation: 3956

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++
}

Upvotes: 0

tuff
tuff

Reputation: 5163

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.

Upvotes: 0

Related Questions