I have this piece of code right here that creates somewhat of a grid (but not really) of chocolate pieces in x and y positions (height and length) depending on what the user chooses in the input, and i want it to assign a new id (preferably imgPos1, imgPos2 etc…) to each piece of chocolate it produces individually. I have tried referring to other posts but i am completely clueless. I am open to any suggestions to third party frameworks (react etc).
HTML (and js):
<html> <body> <div> <form name='grid' id="grid"> <!-- Form to define the x size and y size of the grid made out of chocolate pieces --> Desired Length: <input type='number' name='length' min=1 max=10 step=1 value=1 id="lengthInput" /> Desired Height: <input type='number' name='height' min=1 max=10 step=1 value=1 id="heightInput" /> <input type='button' value='Apply' class="button_Change" /> </form> </div> <div id='choc'></div> <template> <img id="imgPos" src="https://cdn.shopify.com/s/files/1/1061/1924/products/Chocolate_Bar_Emoji_large.png?" onclick='removeMe(this)' class='visible'> </template> <script type="text/javascript"> /* Script that creates the grid by cloning the chocolate image for x:length and y:height */ // defines variables q,d,form using jquery const d = document; const q = (e, n = d) => n.querySelector(e); const form = d.forms.grid; // Listens for activity on the button depending on its state document.querySelector('[type="button"]').addEventListener("click", (e) => { let choc = q("#choc"); choc.innerHTML = ""; // Maxes out the values for height and length to 10 for practical reasons if (form.height.value > 10) form.height.value = 10; if (form.length.value > 10) form.length.value = 10; // assigns chocolate image to length and height for (let y = 0; y < form.height.value; y++) { let div = d.createElement("div"); choc.appendChild(div); for (let x = 0; x < form.length.value; x++) { div.appendChild(q("#imgPos", q("template").content).cloneNode(true)); } } }); function removeMe(e) { e.classList.remove("visible"); }; </script> </body> </html>
CSS
#grid { top: 180px; left: 350px; position: absolute; cursor: auto; font-family: 'Press Start 2P', cursive; font-size: 10px; } #imgPos { display: block; width : auto; height: auto; cursor: pointer; position: relative; width: 20px; height: auto; top: 0px; left: 0px; } #choc { display: grid; grid-template-rows: 1fr 1fr; margin-left: auto; margin-right: auto; top: 240px; left: 340px; position: absolute; cursor: default; } #choc > div{ position: absolute; width:50px; display:block; } #choc > div > #imgPos{ float: left; float: right; clear:none; width:50px; display: inline-block; } #choc > div > #imgPos:not(.visible) { opacity: 0; cursor: default; }
Here’s a fiddle I made using it:
https://jsfiddle.net/p4ekmtgh/
Advertisement
Answer
You can concat the id with variable x and y
let child = q("#imgPos", q("template").content).cloneNode(true); child.setAttribute("id","imgPos" + x + "_" + y); div.appendChild(child);
css should also changed too
here is working fiddle : https://jsfiddle.net/0fhykzmw/