0

I am trying to use the same JavaScript code on all of my duplicated HTML elements. I am incrementing the HTML elements with an innerHtml property. My first duplicate works fine so far, but the second one does not at all. I am not sure if it's getting reference to its own parent class="subgrid" element or not. Any solutions or advice are appreciated.

let grid = document.getElementById("grid")
console.log(grid)
const addCharacter = document.getElementById("add-character")
console.log(addCharacter)
let Hp = 0;
let num = 0;
addCharacter.addEventListener("click", () => {
  grid.innerHTML += `
<div class="subgrid">
  <br>
  <div class="status">Status</div>
  <br>
  <div class="iniative"></div>

  <input class="iniativeel" type="number">

  <button class="iniativebtn">Submit</button>
  <br>
  <div class="character">Character</div>
  <br>
  <div class="healthpoints"></div>
  <br>
  <input class="initalhp" type="number">
  <br>
  <Button class="hpsubbtn">Submit</button>
  <br>
  <input class="damage" type="number">
  <br>
  <button class="damagebtn">Submit</button>
  <br>
  <div class="weapons">Weapons</div>
</div>`
  btn()
})

function btn() {
  const subGrid = document.querySelector(".subgrid")
  console.log(subGrid)

  let iniativeBtn = subGrid.querySelector(".iniativebtn")
  console.log(iniativeBtn)

  // Iniative stuff

  let iniative = subGrid.querySelector(".iniative")
  console.log(iniative)

  let iniativeEl = subGrid.querySelector(".iniativeel")
  console.log(iniativeEl)

  iniativeBtn.addEventListener("click", () => {
    iniative.innerText = parseInt(iniativeEl.value)
  })

  // Healthpoint stuff
  let healthPoints = subGrid.querySelector(".healthpoints")
  console.log(healthPoints)

  let initalHp = subGrid.querySelector(".initalhp")
  console.log(initalHp)

  let hpSubBtn = subGrid.querySelector(".hpsubbtn")
  console.log(hpSubBtn)

  hpSubBtn.addEventListener("click", () => {
    healthPoints.innerText = parseInt(initalHp.value)
  })

  let damage = subGrid.querySelector(".damage")
  console.log("damage")

  let damageBtn = subGrid.querySelector(".damagebtn")

  damageBtn.addEventListener("click", () => {
    healthPoints.innerText = parseInt(initalHp.value) - parseInt(damage.value)
    console.log(healthPoints.innerText)
  })

  //Weapons stuff
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Adding and grabbing HTML Elements</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <button id="add-character">Add</button>
  <div id="grid"></div>

</body>
<script src="main.js"></script>

</html>
Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
SamBoone
  • 39
  • 7
  • 1
    `document.querySelector(selector)` returns the first element that matches the given `selector`. I suggest giving a unique id to the surrounding `subgrid` element and using that as the basis for selection. Also, use event delegation for binding events to elements. – Heretic Monkey May 19 '22 at 17:32
  • See https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements for more on delegation. – Heretic Monkey May 19 '22 at 17:33

0 Answers0