DEV Community

Ted Larsson
Ted Larsson

Posted on

HELP! can I set a methods value to values from the object in javascript?

function Rectangle(width, height, x, y){
this.width = width;
this.height = height;
this.x = x;
this.y = y;
this.widthString = '\''+width+'px'+'\'';
this.heightString = '\''+height+'px'+'\'';
this.area = function() {
console.log("area: " + this.width * this.height);
};

this.newWidth = function (width){
this.width = width;
};

this.newHeight = function (height){
this.height = height;
};

this.translate = function(x,y){
this.x = x;
this.y = y;
};

this.logValues = function(){
console.log('width: ' + this.width + '\n' + 'height: ' + this.height + '\n'

  • 'top: ' + this.x + '\n' + 'left: ' + this.y); };

this.scale = function(scale){
this.width *= scale;
this.height *= scale;
};

this.render = function(width, height, x, y, color){
let rectangle = document.createElement('DIV');
document.body.appendChild(rectangle);
rectangle.className = 'rectangle';
rectangle.style.background = color;
rectangle.style.width = width;
rectangle.style.height = height;
rectangle.style.position = 'absolute'
rectangle.style.top = x;
rectangle.style.left =y;
// rectangle.style.display = 'block';
// rectangle.style.visibility= 'visible'
// let text = document.createTextNode("Hi");
// rectangle.appendChild(text);
};
};

let rectangleOne = new Rectangle(100, 100, 0, 0);
rectangleOne.render('100px', '100px', '0px','0px','green' )
console.log(rectangleOne.widthString, rectangleOne.heightString);

let rectangleTwo = new Rectangle(200, 300, 10, 10);
rectangleTwo.render('100px','100px','100px','100px','blue' )
rectangleTwo.scale(2);

is there a way for me to set the height, width, x, y, values in my this.render method to use the values in my function Rectangle(width, height, x ,y)??

Top comments (7)

Collapse
 
somedood profile image
Basti Ortiz • Edited

Yes, in fact you can. Allow me to explain. 😉

function Rectangle(x, y, width, height) {
  // Here, we are setting all the properties of
  // the `Rectangle` instance upon construction.
  // This is a very common pattern in JavaScript,
  // or "object-oriented programming" in general.
  this.x = x;
  this.y = y;
  this.width = width;
  this.height = height;
}

// Down here, we can access the properties we passed
// in the constructor via `this.{propertyName}`.
Rectangle.prototype.render = function() {
  // Create the <div> element
  const div = document.createElement('div');

  // Set the default HTML properties and
  // CSS styles here
  div.style.position = 'absolute';
  div.className = 'rectangle';

  // Access the `this.{propertyName}` properties
  // we passed in via the constructor.
  div.style.top = this.y + 'px';
  div.style.left = this.x + 'px';
  div.style.width = this.width + 'px';
  div.style.height = this.height + 'px';

  // Finally, we can put the <div> wherever
  // we want. In this case, I plopped it in
  // the <body> for the sake of example.
  document.body.appendChild(div);
};

// After that, we can instantiate the `Rectangle`.
const rect = new Rectangle(25, 25, 100, 200);
rect.render();

P.S. Add the #help tag to your post so more people can see it. 😉

Collapse
 
larssonted profile image
Ted Larsson

Thank you so much! But since I'm new to this (3 weeks in to my first ever JavaScript course) I have some follow-up questions.
1: why is the rectangle function a separate function?
2: what is prototype and why use it?
3: why use const?

Collapse
 
somedood profile image
Basti Ortiz • Edited

For questions #1 and #2, I recommend watching this video to understand what prototypal inheritance is in JavaScript. However, I must mention that this isn't a particularly "beginner-friendly" topic. But if you're curious enough, no one's going to stop you, my friend. Learning is great!

For question #3: I used const because const prevents me from changing the variable. It's "constant". If I try to reassign the variable, it's going to spit out an error—which is a good thing! Most of the time, we never reassign our variables. So to make sure that I don't unexpectedly change the value of some variable, I use const as a way to "prevent bugs".

Also, feel free to ask me any more questions you might have! 😉

Thread Thread
 
larssonted profile image
Ted Larsson

But in my initial code I had methods to change both size and location. Is it possible to to still have those methods if I use let instead of const? (It was part of the exercise to have those methods)

Thread Thread
 
somedood profile image
Basti Ortiz

Ah, yes. Now we have reached the intricacies of JavaScript. When we assign a value to const, what we're really doing is we're just assigning a reference, not the actual value itself. I discuss the implication of this language feature in an old post of mine. 😉 How timely, isn't it?

As for adding methods for setting the size and location, we can simply add the usual setters and getters. We can do this because const stores references, not values.

function Rectangle(x, y, width, height) {
  this.x = x;
  this.y = y;
  this.width = width;
  this.height = height;
}

// Rinse and repeat these setters and getters
// for all properties
Rectangle.prototype.setX = function(newX) { this.x = newX; }
Rectangle.prototype.getX = function() { return this.x; }

const rect = new Rectangle(20, 30, 45, 100);
rect.getX(); // Output: 20
rect.setX(15);
rect.getX(); // Output: 15
Thread Thread
 
larssonted profile image
Ted Larsson

I can see some of the logic in this, ( we haven't
t touched on the subject of 'set & get' yet or prototyping but i will try to learn it in the coming week or two. thanks so much for taking the time to educate me :D

Thread Thread
 
somedood profile image
Basti Ortiz

No problem at all! All I ask is for you to pay this forward in the future. As developers, we gotta look out for each other. 😉