JS calling ID by variable

Question

Hi All
First data:

    let NewDivForGame_0 = document.createElement('div');
    let NewDivForGame_1 = document.createElement('div');
    let NewDivForGame_2 = document.createElement('div');

and so on...12
Next:

  NewDivForGame_0.id = 'Key';
        NewDivForGame_1.id = 'string_1';
            NewDivForGame_2.id = '1a1';

and so on...12
Next: append.
Next:

   for (i=0;i<=12;i++){
       document.getElementById("NewDivForGame_"+i.id).style.width ="35px"; //ERROR
       document.getElementById("NewDivForGame_"+[i].id).style.height= "35px"; //ERROR
       document.getElementById("NewDivForGame_"+[i].id).style.backgroundColor = "blue";
       console.log('Create size div run #'+i);

It doesn't work. Help me please. Please write a solution.

tried:
1)document.getElementById("NewDivForGame_"+i.id).style.width = "35px"; //ERROR 2)document.getElementById("NewDivForGame_"+[i].id).style.width = "35px"; //ERROR
3)

let DetectPer = "NewDivForGame_";
document.getElementById(DetectPer+i.id).style.width = "35px"; //ERROR

It doesn't work. Help me please. Please write a solution.

Answer 1

The main problems with your code are these lines:

   for (i=0;i<=12;i++){
       document.getElementById("NewDivForGame_"+i.id).style.width ="35px"; //ERROR
       document.getElementById("NewDivForGame_"+[i].id).style.height= "35px"; //ERROR
       document.getElementById("NewDivForGame_"+[i].id).style.backgroundColor = "blue";
       console.log('Create size div run #'+i);
   ...

From what I can tell, you're attempting to access your variables by expecting your browser to evaluate the result of concatenating a string with a number.

Aside from that, you're attempting to access the id property from i, which as it stands, is a number. The number primitive does not have an id property, but based on your code it seems you might have been mixing it up with your string/eval assumption.

Lastly, your line of [i] was actually creating an array with the number i being the single and only element. Arrays likewise do not have an id property.

(Un)Fortunately, Javascript doesn't work this way. At least not exactly that way; in order for the browser or container to do what you expect, there's a few methods that could be used, but I'm only going to reference two; the dreaded eval(), which I won't get into due it being a dangerous practice, and an object literal definition. There are of course other ways, such as the other existing answer(s) here, but:

// Here, we define an object literal and assign it properties for each div manually.
let gameDivs = {
  NewDivForGame_0: document.createElement('div'),
  NewDivForGame_1: document.createElement('div'),
  // etc
};

// And then assign the id values sort of like you do in your question;
gameDivs.NewDivForGame_0.id = 'Key';
gameDivs.NewDivForGame_1.id = 'string_1';
gameDivs.NewDivForGame_2.id = '1a1';
// etc

for (i=0;i<=12;i++){
       // Before finally using square bracket notation to target the
       // properties by a dynamic name;
       document.getElementById(gameDivs["NewDivForGame_"+i].id).style.width ="35px";
       document.getElementById(gameDivs["NewDivForGame_"+i].id).style.height= "35px"; 
       document.getElementById(gameDivs["NewDivForGame_"+i].id).style.backgroundColor = "blue";
       console.log('Create size div run #'+i);
}

Of course, you don't even need to select them by their id if you have the reference to them, which you do:

for (i=0;i<=12;i++){
       // Before finally using square bracket notation to target the
       // properties by a dynamic name;
       gameDivs["NewDivForGame_"+i].style.width ="35px";
       gameDivs["NewDivForGame_"+i].style.height= "35px"; 
       gameDivs["NewDivForGame_"+i].style.backgroundColor = "blue";
       console.log('Create size div run #'+i);
}

This example assumes the divs are appended to the document.

This methodology uses square brackets on an object literal. As you may, or may not be aware, square brackets should be used when accessing an object's property in a dynamic way, such as what you were trying to do with string concatenation earlier.

Due to the way objects behave, you could even go so far as to generate the divs with a for-loop and then add them to the object:

let gameDivs = {};

for (let i = 0; i<=12; i++) {
    let gameDiv = document.createElement('div');
    gameDivs["NewDivForGame_"+i] = gameDiv;
    // append them too;
    document.body.appendChild(gameDiv);
}

Of course, I have no idea what pattern you're using for creating element ids, but in general the above would work.