Manipulating run time generated div with array name ID

Question

This successfully generate divs with and array name address as the id for example:

<div id="div1[0]" style="border: 1px solid rgb(0, 255, 0);"></div>

How then does on get a handle on that id using getElementById() examples below do not work. Either by directly access in the div if through the parent which is used in the constructor which is the array divArray();

	var divArray = new Array();			// div array "holder"
	var dCount = 0;						// div array counter

	class dyDiv {

		constructor (){	

			var parentDiv = document.getElementById('canvas');
			var div1 = document.createElement('div');
			var div2 = document.createElement('div');

			div1.setAttribute("id", "div1["+dCount+"]");	// id="div1[0]"  id="div1[2]" ... and so on
			div2.setAttribute("id", "div2["+dCount+"]");

			div1.style.border = "1px #f00 solid";	// red border
			div2.style.border = "1px #0f0 solid";	// green border

			parentDiv.appendChild(div1);
			parentDiv.appendChild(div2);
		}

	}

	function addNewDiv(){

		divArray[dCount] = new dyDiv();
		dCount++;

	}

	function modifyTest(){
		// after creation how does one manipulate a div inside an object
		divArray[0].div1[0].style.border = "1px #00f solid";						// does not work
		document.getElementById('div10').style.border = "1px #00f solid";			// does not work	
		document.getElementById('div1')[0].style.border = "1px #00f solid";			// does not work
		document.getElementById(div1[0]).style.border = "1px #00f solid";			// does not work
	}

	function init(){
		addNew.addEventListener("click", addNewDiv,false);
		modTest.addEventListener("click", modifyTest,false);
	}


	window.addEventListener("DOMContentLoaded",init,false);

<button id="addNew">Create Dynamic Div</button>
<button id="modTest">Modify divArray[0]</button>
<div style="padding:50px" id="canvas"></div>

Intervalia · Accepted Answer · 2018-01-09 20:44:54Z

1

You need to access the div like this:

document.getElementById('div1[0]')

Make sure you include the quotes.

answered Jan 9, 2018 at 20:44

Intervalia

11.1k2 gold badges35 silver badges71 bronze badges

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

4 Comments

Michael Nelles Over a year ago

This is in fact the exact solution I was looking for all such associations work. document.getElementById('div1[0]').style.border = "1px #00f solid"; document.getElementById('div1[0]').innerHTML = "changed";

showdev Over a year ago

@MichaelDouglas Fair enough. If you'll reference each <div> with getElementById, I don't see much use in building the divArray.

Intervalia Over a year ago

Remember to cache the value of document.getElementById to speed up your code. Something like this: var el = document.getElementById('div1[0]'); el.style.border = "1px #00f solid"; el.innerHTML = "changed";

Michael Nelles Over a year ago

@showdev you are correct I thought it could be beneficial to organise my divs under parent nodes. During this process I have concluded as you have that there is no value in doing so if I can access divs named in this fashion directly.

showdev · Accepted Answer · 2018-01-09 21:04:39Z

Given the code you provided, you could use this keyword.

When a function is used as a constructor (with the new keyword), its this is bound to the new object being constructed.

See 'this' as a constructor @ MDN.
Also see the example at Classes Constructor.

var divArray = new Array(); // div array "holder"
var dCount = 0; // div array counter

class dyDiv {

  constructor() {

    var parentDiv = document.getElementById('canvas');
    this.div1 = document.createElement('div');
    this.div2 = document.createElement('div');

    this.div1.setAttribute("id", "div1[" + dCount + "]"); // id="div1[0]"  id="div1[2]" ... and so on
    this.div2.setAttribute("id", "div2[" + dCount + "]");

    this.div1.style.border = "1px #f00 solid"; // red border
    this.div2.style.border = "1px #0f0 solid"; // green border

    parentDiv.appendChild(this.div1);
    parentDiv.appendChild(this.div2);
  }

}

function addNewDiv() {

  divArray[dCount] = new dyDiv();
  dCount++;

}

function modifyTest() {
  // after creation how does one manipulate a div inside an object
  divArray[0].div1.style.border = "1px #00f solid";
}

function init() {
  addNew.addEventListener("click", addNewDiv, false);
  modTest.addEventListener("click", modifyTest, false);
}


window.addEventListener("DOMContentLoaded", init, false);

<button id="addNew">Create Dynamic Div</button>
<button id="modTest">Modify divArray[0]</button>
<div style="padding:50px" id="canvas"></div>

Alternatively, you could return an object from your constructor:

While the default for a constructor is to return the object referenced by this, it can instead return some other object (if the return value isn't an object, then the this object is returned).

var divArray = new Array(); // div array "holder"
var dCount = 0; // div array counter

class dyDiv {

  constructor() {

    var parentDiv = document.getElementById('canvas');
    var div1 = document.createElement('div');
    var div2 = document.createElement('div');

    div1.setAttribute("id", "div1[" + dCount + "]"); // id="div1[0]"  id="div1[2]" ... and so on
    div2.setAttribute("id", "div2[" + dCount + "]");

    div1.style.border = "1px #f00 solid"; // red border
    div2.style.border = "1px #0f0 solid"; // green border

    parentDiv.appendChild(div1);
    parentDiv.appendChild(div2);

    return {
      'div1': div1,
      'div2': div2
    }

  }

}

function addNewDiv() {

  divArray[dCount] = new dyDiv();
  dCount++;

}

function modifyTest() {
  // after creation how does one manipulate a div inside an object
  divArray[0].div1.style.border = "1px #00f solid";
}

function init() {
  addNew.addEventListener("click", addNewDiv, false);
  modTest.addEventListener("click", modifyTest, false);
}


window.addEventListener("DOMContentLoaded", init, false);

<button id="addNew">Create Dynamic Div</button>
<button id="modTest">Modify divArray[0]</button>
<div style="padding:50px" id="canvas"></div>

Collectives™ on Stack Overflow

Manipulating run time generated div with array name ID

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related