Vanilla Js onclick assignment within dynamically created divs

Question

I wish to dynamically create a row of 4 buttons with an .onclick function within dynamically created div. This works perfectly well within a single div, however when attempting to create the buttons inside the nested div, only the buttons created in last div are functioning properly.

I have found questions relating to using var in for loops creating issues, but this doesn't seem to be the case here. I've tried assigning a separate function to .onclick to no avail, and just need to get it sorted!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="entries">
    </div>
</body>


<script>
let synth = window.speechSynthesis;

let createButton = function (pCat, index, phraseDivIndex) {
    let button = document.createElement("button");
    button.innerText = pCat[index];
    button.className = "entry";

    button.onclick = function () {
        synth.speak(new SpeechSynthesisUtterance("boo")); //speak phrase from json
    }
        document.getElementsByClassName("phraseDiv")[phraseDivIndex].appendChild(button); //adds buttons to newly created div for focus management.
}


let populateEntries = function () {
    let phraseDivIndex = -1;
    let pCat = ["one", "two", "three", "four", "five","six","seven","eight","nine"];
    for (let i = 0; i < pCat.length; i++) {
        if (i % 4 == 0) {
            phraseDivIndex++;
            document.getElementById("entries").innerHTML += "<div class=phraseDiv tabindex = 0 class = 'catRow'></div>";
        }
        createButton(pCat, i, phraseDivIndex);
    }
}

//create buttons
populateEntries()

</script>

Outcome of code: Only the last row of buttons created have an .onclick event attached to them. That is a problem!

*edit: array index

Poor technique. .innerHTML += requires a DOM read and write. Store that in a var results = ''; that you results += 'innerHTMLCodeHere'; then Element.innerHTML = results;. Of course, I don't even recommend .innerHTML to create DOM Elements most of the time, since they have to be added to the DOM before you can attach Events to them. document.createElement(tag) is how to create... then it's like Element.className = 'class1 class2 class3'; Element.tabIndex = -1; and the like. Element.onclick = funciton(){ /* do stuff */ }; OtherElement.appendChild(Element). Just advice. — StackSlave
– StackSlave, Commented Aug 8, 2019 at 23:36

stefan judis · Accepted Answer · 2019-08-08 23:27:27Z

2

Welcome to StackOverflow. 👋

Your case is actually a really tricky one. Let me explain though why your event listeners disappear.

The problem lies in this line:

document.getElementById("entries").innerHTML += "<div class=phraseDiv tabindex = 0 class = 'catRow'></div>";

What happens when you use innerHTML in combination with += is the string of innerHTML is accessed and then concatenated with whatever you define.

You defined the onclick handler as a DOM element property (read more about attributes vs properties here) and these are not included when you access the elements via innerHTML and concatenate them with another HTML string. What happens is that you're removing the onclick properties every 4th round because they won't be stringified.

What you could do to fix this is not use =+ with innerHTML but rather appendChild which keeps the DOM intact.

if (i % 4 == 0) {
  phraseDivIndex++;
  const newContainer = document.createElement('div');
  newContainer.classList.add('phraseDiv', 'catRow');
  newContainer.tabIndex = 0;

  document.getElementById("entries").appendChild(newContainer)
}

You can find a running version here. Hope this helps. :)

edited Aug 8, 2019 at 23:27

answered Aug 8, 2019 at 21:46

stefan judis

4,01820 silver badges27 bronze badges

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

2 Comments

mumbleMam Over a year ago

Perfect! Thank you for the great explanation and the further references.

stefan judis Over a year ago

Happy to help. :)

Fabian von Ellerts · Accepted Answer · 2019-08-08 21:04:26Z

1

I think you are talking about a live event listener. You can create it like this:

document.addEventListener('click', e => {
  const button = e.target.closest('button')

  if (button) {
       synth.speak(new SpeechSynthesisUtterance("boo"));
  }
})

Also, calling document.getElementById("entries").innerHTML += for every iteration is very imperformant. Append to a string instead (the button too, best using template literals) and set innerHTML in the end.

answered Aug 8, 2019 at 21:04

Fabian von Ellerts

5,26143 silver badges35 bronze badges

Collectives™ on Stack Overflow

Vanilla Js onclick assignment within dynamically created divs

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related