Javascript constructor/OOP

Question

I'm pretty new to javascript and I'm trying to recreate this: https://ibb.co/hh45jH

new Box(0, 0, 20, 30, "#007", parentDiv)

doesn't produce anything at all and I'm not quite sure why. I want it to produce a colored div with the above specifications

This is my code so far:

class Box {
  constructor(xPosition, yPosition, width, height, backgroundColor, parentElement) {
    var div = document.createElement("div");
    div.style.width = width;
    div.style.height = height;
    div.style.background = backgroundColor;
    style.position = "absolute";
    style.top = yPosition;
    style.left = xPosition;
  }

  function draw() {
    var parent = document.getElementById("parentDiv");
    new Box(0, 0, 20, 30, "#007", parentDiv)
  }
}
window.addEventListener("load", draw);

.parentDiv {
  width: 500px;
  height: 500px;
  background-color: red;
}

<div class="parentDiv"></div>

I want the above JavaScript code to produce a new div with the given instructions (color, height, width and so on) and then place it in the parentDiv just like in the example (link above).

Can you recreate a code snippet describing your problem? Your question is not clear, what bugs/problems do you have? — Limbo
– Limbo, Commented Apr 26, 2018 at 7:39
Please visit the help center, take the tour to see what and How to Ask. Do some research, search for related topics on SO; if you get stuck, post a minimal reproducible example of your attempt, noting input and expected output. Just click the <> snippet editor and add code that shows the output and tell us the expected output — mplungjan
– mplungjan, Commented Apr 26, 2018 at 7:41
new Box(0, 0, 20, 30, "#007", parentDiv) doesn't produce anything at all and I'm not quite sure why. I want it to produce a colored div with the above specifications — MrMeeseeks
– MrMeeseeks, Commented Apr 26, 2018 at 7:42
I created a snippet for you. Please see the console output and fix it — mplungjan
– mplungjan, Commented Apr 26, 2018 at 7:44
You have undefined style and the code runs if you move the function draw out of the class. var div = document.createElement("div"); var style = div.style; — mplungjan
– mplungjan, Commented Apr 26, 2018 at 7:47

mplungjan · Accepted Answer · 2018-04-26 08:03:24Z

0

I made few changes to your snippet. Check this out and fell free to comment if you have any doubt

class Box {
  constructor(xPosition, yPosition, width, height, backgroundColor) {
    this.element = document.createElement("div");
    var style = this.element.style;
    style.width = width + "px";
    style.height = height + "px";
    style.background = backgroundColor;
    style.position = "absolute";
    style.top = yPosition;
    style.left = xPosition;
  }
}

function draw() {
  let parentDiv = document.getElementById("parentDiv");
  let newBox = new Box(0, 0, 20, 30, "#557");
  parentDiv.append(newBox.element);
}


window.addEventListener("load", draw);

#parentDiv {
  width: 500px;
  height: 500px;
  background-color: red;
}

<div id="parentDiv"> asd </div>

edited Apr 26, 2018 at 8:03

mplungjan

180k29 gold badges183 silver badges246 bronze badges

answered Apr 26, 2018 at 7:45

Robdll

6,2837 gold badges35 silver badges55 bronze badges

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

2 Comments

Bergi Over a year ago

There's no good reason why Box should be a class. Just make it a function that returns the element.

Robdll Over a year ago

agree, but changing things too much could lead the OP to a more difficult understanding.

ReadyFreddy · Accepted Answer · 2018-04-26 08:21:17Z

As you can see on my snippet, after you define your class properly, you can create an object by this class and use a function from this object to draw it like that.

class Box {
  constructor(xPosition, yPosition, width, height, backgroundColor) {
    this.element = document.createElement("div");
    this.element.style.width = width+"px";
    this.element.style.height = height+"px";
    this.element.style.background = backgroundColor;
    this.element.style.position = "absolute";
    this.element.style.top = yPosition;
    this.element.style.left = xPosition;
  }
  
  draw(){
  var parentDiv = document.getElementById("parentID");
  var newBox = new Box(0, 0, 20, 30, "#007");
  parentDiv.append(newBox.element);
  }
}

const newBoxObj = new Box();


window.addEventListener("load", newBoxObj.draw());

<div id="parentID"></div>

Collectives™ on Stack Overflow

Javascript constructor/OOP

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related