I have a DIV tag that is created by using an onclick event. The DIV tags ID increments itself by 1 every time the button is pressed. Not using a closure just incrementing the ID by adding + i++;
w.id = 'myDiv' + i++;
The DIV is created and increments the ID by 1 every time you click the button. DIV1, DIV2, DIV3.
The issue is that with the way I am incrementing the DIV tag id is that I can’t seem to figure out how to append any child elements to any other DIV besides the first one.
You need to append each new <div> to your document’s body. Alternatively you can insert it before or after an existing element. I am assuming you do not want to create a <div> within a <div>.
I don’t know if this helps, or is just confusing. I know I struggled with grasping closures the first time.
You can run this in your browser console or snippets. ‘console.dir’ doesn’t appear to work in codepen
function outer() {
let x = 5
let y = 10
function inner() {
// we only reference 'x' here
// so cleverly 'y' will not be included
// in the closure returned with inner
console.log(x++)
}
// return inner along with it's scoped closure (A kind of backpack holding 'x')
return inner
}
const increment = outer() // inner is returned so the same as const increment = inner
increment() // 6
increment() // 7
increment() // 8
// let's have a peek at increment
console.dir(increment)
// outputs
// f inner()
// [[Scopes]][3]
// 0: Closure (outer) {x: 8} <--
// no access to 'x' out here
console.log(x) // ReferenceError: x is not defined
Working off Archibald’s script here is a codepen
just a ps @Archibald newDIV = document.createElement("DIV"); is defining a global
Here is the snippet. Maybe this will help illustrate the issue. As mentioned before everything works and the DIV tags increments themselves by 1. The issue is appending children to each new DIV tag. Right now the child will append itself to the first DIV but if you click the add Div button more than once the child elements are added to the first DIV again. Below I am using (“myDiv1”) just to show it will append. But that is also the problem I am needing to figure out. How to make (“myDiv1”) dynamic so that with each new button click the myDiv1 changes to myDiv2, myDiv3, etc.
<button onclick="addDiv();">add Div</button>
<script>
var i = 0;
function addDiv() {
var w = document.createElement("DIV");
var z = document.createElement('TEXT');
z.setAttribute("type", "text");
w.id = 'myDiv' + i++;
z.id = 'textDescription';
document.getElementById("Container").appendChild(w);
// how to make myDiv1 change to myDiv2, myDiv3, with each new button click to append children to the last created DIV
document.getElementById("myDiv1").appendChild(z);
}
</script>
i.e. document.getElementById("Container").appendChild(w).appendChild(z);
There is no text element in html so I assume you wanted an input element as you were setting its type to text. You would also need to increment the id on the input as well.
Roughly like this but you really should be using an event listener as shown in the demo code from @Archibald.
var i = 0;
function addDiv() {
var w = document.createElement("DIV");
var z = document.createElement("INPUT");
z.setAttribute("type", "text");
w.id = "myDiv" + i;
z.id = "textDescription" + i;
i++;
document.getElementById("Container").appendChild(w).appendChild(z);
}
If that’s what you wanted then I;'l leave it to the JS gurus here to show you how to tidy that lot up
i.e. document.getElementById("Container").appendChild(w).appendChild(z);
There is no text element in html so I assume you wanted an input element as you were setting its type to text. You would also need to increment the id on the input as well.
Roughly like this but you really should be using an event listener as shown in the demo code from @Archibald.
var i = 0;
function addDiv() {
var w = document.createElement("DIV");
var z = document.createElement("INPUT");
z.setAttribute("type", "text");
w.id = "myDiv" + i;
z.id = "textDescription" + i;
i++;
document.getElementById("Container").appendChild(w).appendChild(z);
}
If that’s what you wanted then I’ll leave it to the JS gurus here to show you how to tidy that lot up
I slightly modified the snippet to make it easier.
Thanks for letting me know you can append multiple children to the “Container” but that doesn’t append them to the DIV. There’s a reason I want each DIV to be incremented and for each child to be appended to its corresponding DIV.
The way you are suggesting is to just put everything into the same container and then by doing it that way I can’t accomplish ultimately what I am needing.
It adds each element inside the element before. So (y) is inside (x) and (x) is inside (w) whereas I am needing (y) and (x) to be inside (w)
There is more than one element that is meant to go inside the DIV. When I append multiple elements, the last element always goes inside the element which was appended directly before
To associate a label with an input element either the input element needs to be within the label element (as a child) or the label needs a for attribute attribute whose value is the same as the input’s id
