How to add id to constructor [closed]

Question

How can i add an id to the constructor?

function ready() { function Rectangle(i, w, h, c) { this.id = i; this.width = w; this.height = h; this.color = c; } Rectangle.prototype.elemId = function() { return this.id = document.getElementById(); } Rectangle.prototype.doublewidth = function() { return this.width * 2; } Rectangle.prototype.doubleheight = function() { return this.height * 2; } var oneRect = new Rectangle("elem", 300, 150, "green"); oneRect.elemId().style.background = oneRect.color; oneRect.elemId().style.width = oneRect.doublewidth() + "px"; oneRect.elemId().style.height = oneRect.doubleheight() + "px"; }; document.addEventListener("DOMContentLoaded", ready);

 <div id="elem"></div>

It is not clear what the code should do, and what is the relationship between id and constructor.
Perhaps the correct answer is here: Да, именно так
If you plan to change the properties of a rectangle through the style - your object will become obsolete with each such operation.
Can you please elaborate a bit about the style :) I just just started to learn and do not understand a bit about the styles that you wrote

Accepted Answer · 2017-01-31T09:21:42

id has already been added to your constructor: this.id = i

Apparently, you are trying to return an element by id in the elemId method:

 Rectangle.prototype.elemId = function() { return document.getElementById(this.id); }

ThisMan ThisMan 9,589 1 golden mark 15 silver marks 30 bronze marks · Answer 2 · 2017-01-31T09:21:57

In the same constructor, you can create a field where the link to the html-объект will be stored, because each time calling getElementById not very correct

 function ready() { function Rectangle(i, w, h, c) { this.id = i; this.width = w; this.height = h; this.color = c; // ссылка на html объект this.elem = document.getElementById(i); } Rectangle.prototype.doublewidth = function() { return this.width * 2; } Rectangle.prototype.doubleheight = function() { return this.height * 2; } var oneRect = new Rectangle("elem", 300, 150, "green"); oneRect.elem.style.background = oneRect.color; oneRect.elem.style.width = oneRect.doublewidth() + "px"; oneRect.elem.style.height = oneRect.doubleheight() + "px"; }; document.addEventListener("DOMContentLoaded", ready);

Good advice, but I want to note that that's just getElementById one of the most optimized methods for working with DOM.

Answer 3 · 2017-01-31T09:47:34

An example of implementation through setters (described only the width for simplicity):

 function Rectangle(id, w, h, color) { var el = document.getElementById(id); el.style.width = w + 'px'; el.style.height = h + 'px'; el.style.backgroundColor = color; Object.defineProperty(this, "width", { set: function (width) { w = width; el.style.width = w + 'px'; }, get: function() {return w = parseFloat(el.style.width);} }); } var r = new Rectangle('rect', 25, 50, 'red'); setTimeout(() => r.width*=2, 5e2); setTimeout(() => r.width*=2, 10e2); setTimeout(() => r.width*=2, 15e2);

 <div id="rect"></div>

And you know that in the current view in your code, new optional.
No need to remove anything) Tomorrow we will change the implementation, say on the new-fashioned class =)
In this case, your Rectangle is not a constructor, but a normal function
The function in the constructor turns not the use of this , but the operator new
The new operator describes well the behavior with functions like this.

How to add id to constructor [closed]

Closed due to the fact that the essence of the issue is incomprehensible to the participants Pavel Mayorov , Denis Bubnov , aleksandr barakin , Vadim Ovchinnikov , user194374 3 Feb '17 at 6:07 .

3 answers 3

More articles: