Daniel Cheung Daniel Cheung - 1 year ago 84
HTML Question

Jquery/JS - Create Objects Dynamically For Each Div Within


This is one of my old posts. Basically, I wanted to create variables with dynamic names via functions with a string parameter and that the variables is stored globally outside the scope of the function and can be accessed later by any other functions.

But because I don't know the term "global" and so, I was having a hard time explaining.


Backstory: So I wanted to build a JS library for my own interface webpages. The result is, if I add
<div class="window SOMENAME"></div>
within my
. The webpage will generate a working window. That I have done.

But some JS objects must be declared for this to work

window["window" + winname].bmaxheight = $(cwindow).height();

, So if I add a new window "

<div class="window s">
<!--Each window(`div`) REQUIRES a `.window` class and a unique name(here, ".s"), there WILL be ONLY 2 classes.-->

, I had to hand type the following

windows = new Object();
windows.bmaxwidth = 0;
windows.bmaxheight = 0;
windows.bmaxpositionx = 0;
windows.bmaxpositiony = 0;
//Each new window(`div`) REQUIRES a new object named with the string "window" and the name(here, "s") appended.

So how do you generate new JS
s dynamically for each new manual input of
(window) in a loop?

Meaning, if I just hand typed in the

<div class="window SOMENAME"></div>

, it will automatically declare the objects:

windowSOMENAME = new Object();
windowSOMENAME.bmaxwidth = 0;
windowSOMENAME.bmaxheight = 0;
windowSOMENAME.bmaxpositionx = 0;
windowSOMENAME.bmaxpositiony = 0;


function loop() {
1.check all divs within $("#Environment") and make an array of names for new objects(above are "s" and "SOMENAME")(no problem)
2.generate new objects in a loop ("window" + "NAME" and declare bmaxwidth, bmaxheight...)

Please comment if more information is needed.

Answer Source

I could use the other syntax to access the variables. Because global variables are stored under window

window["SOMENAME"] = new Object();

It would work also with a variable inside

var k = "SOMENAME"
window[k] = new Object();


A better approach is to create some empty objects initially and globally, then later populate them with the respective "dynamic variables". In this way, data are organized better rather than dumping everything under window.


var fruitBasket = {};

function addFruit(name, fruitProperties) {
    /*Maybe some logics to determine whether the fruit already
      exists in the basket to make this function more useful
      than simply fruitBasket.SOMENAME = {SOMEOBJECT}*/
    fruitBasket[name] = fruitProperties;

function getFruit(name) {
    return fruitBasket[name];

addFruit("apple", {
    color: "red",
    growsOnTree: true


Or you may even want to organize it better like this:

var fruitBasket = {
    storedFruits: {},
    addFruit: function(...) {...},
    getFruit: function(...) {...}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download