So within my Javascript I am able to duplicate my HTMl Id="characters" wrapper only once. I know it should technically be a "class" rather than an "Id" because it will be a duplicated "Id", but for some reason I don't get; when I change my "getElementById" to a "getElementsByClassName" and my HTML "Id" to a "class" it doesn't duplicate at all. Also because I am using clone.Node(true), I am losing the functionality of my "addEventListeners" in the duplicated wrapper. Is there a way to correct this using only vanilla Javascript? And as if this isn't annoying enough, my duplicated wrapper is throwing itself out of my CSS grid it seems. its all very tedious and troublesome, and so I thank you for any advice I can get.
Here is my current HTML.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css">
<h1><!--D&D DM Tool--><h1>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<div id="header-container">
<h1 id="header">Game Tools</h1>
</div>
<div class="importantbuttons">
<button id="resetbutton">Next Round</button>
<button id="orderbutton">Order</button>
<button id="zerobutton">Zero</button>
<button id="deadremoverbtn">Bring Out the Dead!</button>
<button id="addnpcbtn">Add NPC</button>
</div>
<div id="grid">
<div class="characters">
<div id="subgrid" class="subgrid" >
<div class="name-bloodiedstuff">
<div class="halfWayDown"></div>
<div class="character-name-display">Name</div>
<button class="name-submit-btn">Submit</button>
<input type="text" class="input-name-el" placeholder="Name">
<div class=int-stuf>
<div class="roll-display">Iniative</div>
<button class="iniativebtn">Submit</button>
<input type="number" class="iniative-roll-el" placeholder="Iniative Roll">
</div>
<div class="healthpoints-display">Healthpoints</div>
<button class="hp-submit-btn">Submit</button>
<input type="number" class="input-hp-el" placeholder="Total HealthPoints">
<button class="hp-deductin-btn">Submit</button>
<input type="number" class="input-hp-deduction-el" placeholder="Damage">
</div>
<div class="weapons-display">Weapons</div>
<button class="weapon-btn">Submit</button>
<input type="text" class="weapon-input-el" placeholder="Weapons">
<button class="active-btn" class="button">Active</button>
</div>
</div>
</div>
</body>
<script src="mainCopy.js"></script>
</html>
Here is my current Javascript duplication function.
addNpcBtn.addEventListener("click",function(){
var characterSubGrids=document.getElementsByClassName("characters");
console.log(characterSubGrids[0]);
var characterSubGridsClone=characterSubGrids[0].cloneNode(true);
let grid=document.getElementById("grid");
console.log(grid);
grid.appendChild(characterSubGridsClone);
});
` inside your `` doesn't really make too much sense. Both these tags also need to be closed with `` and `
` respectively. Similarly, the ` – Shawn Mar 08 '22 at 21:00