Change elements data by method dynamically

Question

Below object appends div element to the body whenever obj.appendDiv() method is called.

var obj = {
    width: 100,
    height: 100,
    background: "black",
    appendDiv: function () {
        var div = document.createElement('div');
        div.style.width = this.width;
        div.style.height = this.height;
        div.style.background = this.background;
        document.body.appendChild(div)
    }
}

How to change all derived data in all appended divs whenever any parameters of obj are changed like typing obj.width = "500px" in console, changes all appended divs width.

I mean did you try to solve this somehow or do you rather not trying yourself? — Amit
– Amit, Commented Jan 25, 2016 at 5:03
And actually, I will use that way to rather larger project if I can find a solution. The code above is just a small example — RegarBoy
– RegarBoy, Commented Jan 25, 2016 at 5:11
If JQuery is allowed, you could use something like $("div").css("width", "500px"); — user2314737
– user2314737, Commented Jan 25, 2016 at 5:15

guest271314 · Accepted Answer · 2016-01-25 05:21:21Z

1

Try creating an array div elements created by appendDiv, a method to change div elements created by appendDiv

var obj = {
    width: 100,
    height: 100,
    background: "black",
    divs: [],
    changeDivs: function(prop, val) {
      this.divs.forEach(function(el) {
        el.style[prop] = val
      })
    },
    appendDiv: function (text) {
        var div = document.createElement('div');
        div.style.width = this.width;
        div.style.height = this.height;
        div.style.background = this.background;
        div.textContent = text || "";
        this.divs.push(div);
        document.body.appendChild(div)
    }
}

obj.appendDiv("abc");
obj.appendDiv(123);
obj.changeDivs("color", "blue")

answered Jan 25, 2016 at 5:21

guest271314

1

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

2 Comments

RegarBoy Over a year ago

After change, new divs are not retrieving changed parameters. But thank you anyway, I will do the rest.

guest271314 Over a year ago

@developer Try adding properties to obj which are set if changeDivs is called, use if condition within appendDiv to check of properties of obj referencing changes are defined, if true , apply properties, values to created div within appendDiv

Collectives™ on Stack Overflow

Change elements data by method dynamically

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related