How can you activate events on elements that are created later in Javascript?

Question

How can you activate events on elements that are created later in Javascript?

I have developed my version of the Windows calculator, but I am facing a challenge with the "memory tab."

My task is to create click events for the three buttons - MC, M+, M- located at the top right corner of the screen:

https://i.sstatic.net/Gd8CC.jpg

The issue is that these buttons (along with other elements) are generated every time I click "MS" on the main calculator situated on the left side of the screen, above the main buttons.

function addMemoryValue(){
  const uls = document.createElement("ul");
  const lis = document.createElement("li");
  const h2s = document.createElement("h2");
  h2s.textContent = Number(display.textContent);
  const h3s = document.createElement("h3");

  uls.appendChild(lis);
  lis.appendChild(h2s);
  h2s.appendChild(h3s);

  let valueBtn = ["MC", "M+", "M-"];

  valueBtn.forEach((element) => {
  const memoryBtn = document.createElement("button");
  memoryBtn.setAttribute("value", element);
  memoryBtn.textContent = element;
  const memorySpn = document.createElement("span");
  memorySpn.appendChild(memoryBtn);
  memoryBtn.classList.add("btnsave");
  h3s.appendChild(memorySpn);

  const buttonTest = document.getElementsByClassName("btnsave");
  console.log(buttonTest.textContent);
  })

I aim to iterate through these buttons and set up if statements based on their textContent, but I am unsure how to target the buttons since they are not yet present.

If, for example, I attempt the following:

const buttonTest = document.getElementsByClassName("btnsave");
console.log(buttonTest.textContent);

I receive "undefined," regardless of whether console.log is inside or outside the function.

javascript html css

Answer 1

Answer №1

One way to add click event handlers directly to buttons is by creating them like this:

var clickHandler = function() {
    console.log("button clicked");
};

var button = document.createElement("button");
button.textContent = "test";
button.addEventListener("click", clickHandler);

document.getElementById("container").appendChild(button);

<div id="container">

</div>

Another way to handle events:

This code snippet will generate three buttons with different event handlers for each one.

var createButton = function(title, clickHandler) {
    var button = document.createElement("button");
    button.textContent = title;
    button.addEventListener("click", clickHandler);

    return button;
};

var removeButtons = function() {
    var container = document.getElementById('container');
    
    while (container.firstChild) {
      container.removeChild(container.lastChild);
    }
};

var createButtons = function() {
    removeButtons();
    
    var container = document.getElementById('container');
    
    container.appendChild(createButton("button 1", () => console.log("button 1 clicked")));
    container.appendChild(createButton("button 2", () => console.log("button 2 clicked")));
    container.appendChild(createButton("button 3", () => console.log("button 3 clicked")));
};

document.getElementById('create').addEventListener("click", createButtons);
document.getElementById('remove').addEventListener("click", removeButtons);

#container {
  border: 1px dashed teal;
  min-height: 1em;
}

<button id="create">generate buttons</button>
<button id="remove">remove buttons</button>

<div id="container"></div>

Answer 2

One way to add click event handlers directly to buttons is by creating them like this:

var clickHandler = function() {
    console.log("button clicked");
};

var button = document.createElement("button");
button.textContent = "test";
button.addEventListener("click", clickHandler);

document.getElementById("container").appendChild(button);

<div id="container">

</div>

Another way to handle events:

This code snippet will generate three buttons with different event handlers for each one.

var createButton = function(title, clickHandler) {
    var button = document.createElement("button");
    button.textContent = title;
    button.addEventListener("click", clickHandler);

    return button;
};

var removeButtons = function() {
    var container = document.getElementById('container');
    
    while (container.firstChild) {
      container.removeChild(container.lastChild);
    }
};

var createButtons = function() {
    removeButtons();
    
    var container = document.getElementById('container');
    
    container.appendChild(createButton("button 1", () => console.log("button 1 clicked")));
    container.appendChild(createButton("button 2", () => console.log("button 2 clicked")));
    container.appendChild(createButton("button 3", () => console.log("button 3 clicked")));
};

document.getElementById('create').addEventListener("click", createButtons);
document.getElementById('remove').addEventListener("click", removeButtons);

#container {
  border: 1px dashed teal;
  min-height: 1em;
}

<button id="create">generate buttons</button>
<button id="remove">remove buttons</button>

<div id="container"></div>

How can you activate events on elements that are created later in Javascript?

Answer №1

Similar questions

Creating a dynamic pulse effect using jQuery to manipulate CSS box-shadow

Swap image in div upon hovering over a list of links in another div

Is it possible for $templateCache to preload images?

How to Determine if Your Chrome Packaged App is Operating in Kiosk Mode

Add a dynamic Angular component (HTML) to the TinyMCE editor by clicking a button

What is the best approach for looping through an array fetched using Ajax in Vue?

I am interested in creating a ranking system in JavaScript using JSON data based on points

Disabling a button does not automatically shift the focus to the next element in the tab order

When removing a class from a group of elements in JavaScript, it seems to only erase approximately fifty percent of the

Transform your .obj files into .glb files effortlessly with npm and Laravel

Joi validation that focuses on required array elements while disregarding nested keys

Simulate internationalization for vue using jest

jQuery/MVC3 script not triggering onclick event after initial execution

Tips for utilizing multiple ngFor directives for property binding within a single directive

Customize the header color of open panels in Bootstrap 4

When the window size is reduced, the image continues into the next div

What is the best way to include a new css class in the surrounding tag when using Sitecore's MVC HtmlHelper for fields?

Personalized input element featuring integrated chips and accompanying text

The code runs perfectly on CodePen, but it's not functioning properly on my website

The onChange event seems to be failing to activate during a jQuery / Ajax form submission