Passing button value for a dynamically created button - javascript

I have elements that are dynamically created. But I can't seem to add a onclick event that passes down the buttons own value. The function itself is not being called.
var btn = document.createElement('button');
btn.innerHTML = "Edit";
btn.value = i;
btn.onclick ="EditData(this.value)"; // <----
function EditData(value) {
alert(value);
}

Set the function itself:
var btn = document.createElement('button');
btn.innerHTML = "Edit";
btn.value = '2';
btn.onclick = EditData;
function EditData(event) {
alert(this.value);
}

You have to assign a function to onclick, not a string:
btn.onclick = function() {
EditData(this.value);
};
Maybe you thought you had to assign a string, because in HTML we would write
onclick="...."
However, the DOM API is different from HTML.
Learn more about events and different ways to bind handlers.

Related

Create just one button using javascript?

I have a HTML button that when you click on it, calls a function. The function is below:
function newButton ()
{
let btn = document.createElement("BUTTON");
btn.innerHTML = "Click me";
document.body.appendChild(btn);
}
I need it so the HTML button can only call this function once (so that it only creates 1 button) otherwise, if you continue clicking the original HTML button, it will just continue creating more new buttons.
Any ideas?
One way would be to keep track of the state in a variable. Something like:
let created = false;
function newButton () {
if (!created) {
// your code
created = true;
}
}
With addEventListener you could listen for an event only once by setting the once option to true. This will remove the event listener after newButton has been called.
const button = document.getElementById('create-button');
function newButton () {
let btn = document.createElement("BUTTON");
btn.innerHTML = "Click me";
document.body.appendChild(btn);
}
button.addEventListener('click', newButton, { once: true });
<button id="create-button">Create Button, but only once.</button>
You can check if button exists, with ID or class exists. If it doesn't create new one. In other case - do nothing.
Sure, just add a if statement and a var (int if you want to create lets say several, boolean if only one), something like that:
var btnAmount = 1;
function newButton ()
{
if(btnAmount == 1) {
//do your thing and create the button
btnAmount--;
}
}
function newButton ()
{
let btn = document.createElement("BUTTON");
btn.innerHTML = "Click me";
document.body.appendChild(btn);
btn.addEventListener('click', newButton, { once: true });
}
document.getElementById('rootButton').addEventListener('click',newButton);
<input type="button" value="Create Buttons" id='rootButton'>
Quick and dirty, without knowing much more about your specific scenario:
function newButton ()
{
let btn = document.createElement("BUTTON");
btn.innerHTML = "Click me";
document.body.appendChild(btn);
newButton = () => {};
}
If you're invoking this function from an event handler, you could set the once option on addEventListener. Doing so will only invoke the method once, while removing the handler for subsequent invocations.
illustration

Getting the ID from a button created with JavaScript

So I am creating a few buttons dynamically via javascript.
function dobutton() {
for (i=0; i<eigenschaften; i++){
var btn = document.createElement("BUTTON");
btn.className = 'button black';
btn.id = eigenschaftsarray[i];
btn.name = 'pickbutton';
btn.innerHTML = eigenschaftsarray[i].split("_").join(" ");
document.getElementById('auswahl').appendChild(btn);
document.getElementById('auswahl').innerHTML += " ";
}
}
eigenschaften = 39
eigenschaftsarray = just some names
Now I want to get the ID of the button I click. I was not able to get anything from this JavaScript - onClick to get the ID of the clicked button running because of my method using js to create those buttons. Adding the onClick event to my code just instantly alerts 39 "unknown".
Can someone provide me some help, I am just using Javascript, no jQuery :)
Thanks!
When you create elements dynamically, you have to keep in mind that you can bind events to them only after they are available in the DOM.
Here is a working demo: jsfiddle demo
In the demo, we bind an event listener ("click") to the parent that contains the buttons. The parent is a static element, already available in the DOM.
The JavaScript code is:
var eigenschaften = 3;
var eigenschaftsarray = ["b0","b1","b2"];
// fn: detect if a button was clicked -> get id
function buttonClick(e){
// check if the clicked element is a button
if (e.target.tagName.toLowerCase() == "button") {
var btn = e.target;
// alert the user what button was clicked
alert("button id="+btn.id);
}
}
// fn: create buttons dynamically
function dobutton() {
// identify parent
var parent = document.getElementById('auswahl');
// create buttons dynamically
for (i=0; i<eigenschaften; i++){
var btn = document.createElement("button");
btn.className = 'button black';
btn.id = eigenschaftsarray[i];
btn.name = 'pickbutton';
btn.innerHTML = eigenschaftsarray[i].split("_").join(" ");
// append btn to parent
parent.appendChild(btn);
parent.innerHTML += " ";
}
// add "click" listener on parent
parent.addEventListener("click", buttonClick);
}
// create buttons
dobutton();
Step 1: Add Buttons Dynamically To DOM
HTML :
<body>
<h1>
HelloWorld HelloWorld
</h1>
<div id="stackMe"></div>
</body>
Javascript :
const data = [{'Name' : 'Hello', 'Id' : 1},
{'Name' : 'World', 'Id' : 2}];
window.addEventListener('DOMContentLoaded', function (){
console.log('DOM loaded');
generateButtons(data);
});
function generateButtons(data) {
const buttonResults = data.map(bt =>`<button id= "${bt.Id}" onClick="btClicked(${bt.Id})">Button ${ bt.Name }</button>`);
document.getElementById("stackMe").innerHTML = buttonResults;
}
Step 2: Add an event listener for the button clicked
function btClicked(currentId) {
let elementClicked = data.find(d => d.Id == currentId);
console.log(elementClicked);
}
Output: Out after the button is clicked

Add "onclick" handler to a dynamically created element in pure javascript

I'm dynamically creating and deleting elements "a" and "button" on a page. I want to add handlers "onclick" to them as I create them. All the examples I've seen so far were in jquery. How can I do that in pure javascript?
You can do like this:
for(var i=0;i<5;i++){
var a = document.createElement("a");
a.innerHTML="a"+i;
document.body.appendChild(a);
var button = document.createElement("button");
button.innerHTML="button"+i;
button.onclick = function(){
console.log("event on button");
}
document.body.appendChild(button);
}
You can use addEventListener to add a click listener on a dynamic button.
var btn = document.createElement("button");
btn.addEventListener('click', function(){
alert('button clicked!');
}, false);
document.body.appendChild(btn);
This example will create a button with some text and add it to an element with the id of test.
var btn = document.createElement('button');
btn.appendChild(document.createTextNode('test'));
btn.addEventListener('click', function() {
alert('it works');
}, false);
document.getElementById('test').appendChild(btn);
Hopefully this will help you out.
from: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
HTML Content
<table id="outside">
<tr><td id="t1">one</td></tr>
<tr><td id="t2">two</td></tr>
</table>
JavaScript Content
// Function to change the content of t2
function modifyText() {
var t2 = document.getElementById("t2");
if (t2.firstChild.nodeValue == "three") {
t2.firstChild.nodeValue = "two";
} else {
t2.firstChild.nodeValue = "three";
}
}
// add event listener to table
var el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);

Click event in dynamically created Element

I am new to Javascript and learning new things day by day.
Here I need to click the button and new button are created now I need to again click that newly created button and create new button again and so on. It must be in Pure Javascript.Please help me out
document.getElementById("btn").addEventListener("click",function(e) {
var btn=document.createElement("BUTTON");
var t=document.createTextNode("Click Me");
//Some code to click dynamically created element
btn.appendChild(t);
document.body.appendChild(btn);
Create a function to create a button that creates a button. Note: you're not appending the text node to the button.
If you want to watch changes in the DOM and add events to the buttons in a alternative way, check the answers in this question...
var body = document.getElementsByTagName('body')[0];
(function myButton() {
var btn = document.createElement("BUTTON");
var text = document.createTextNode("Click Me");
// append the text to the button
btn.appendChild(text);
// append the btn to the body tag
body.appendChild(btn);
// adds the click event to the btn
btn.addEventListener("click", myButton);
})();
In this case, jQuery do the good jobs for you.
$(function($){
$(document).on('click','button',function(e){
// do your stuff.
})
})
Here is another good answer using jQuery:
Event binding on dynamically created elements?
Simply add a eventlistener to document, then check tag.
You can further expland it by also adding a Id or Class to the buttons and check that aswell (in case you need multiple buttons that does different things)
document.addEventListener('click', function(event) {
var clickedEl = event.target;
if(clickedEl.tagName === 'BUTTON') {
clickedEl.innerHTML = "clicked!";
var btn=document.createElement("BUTTON");
var t=document.createTextNode("Click Me");
btn.appendChild(t);
document.body.appendChild(btn);
}
});
<button>Click Me</button>
Make it a generic function and bind the click events to that method.
function addButton () {
var btn = document.createElement("BUTTON");
btn.type = "button";
var t = document.createTextNode("Click Me");
btn.appendChild(t);
btn.addEventListener("click", addButton);
document.body.appendChild(btn);
}
document.getElementById("btn").addEventListener("click", addButton);
<button type="button" id="btn">Button</button>
Or event delegation
function addButton () {
var btn = document.createElement("BUTTON");
btn.type = "button";
var t = document.createTextNode("Click Me");
btn.appendChild(t);
document.body.appendChild(btn);
}
document.body.addEventListener("click", function(e) {
if (e.target.tagName==="BUTTON") { //I personally would use class or data attribute instead of tagName
addButton();
}
});
<button type="button" id="btn">Button</button>

Onclick event triggering onload for button

I have a div, and I want to append a button created with JS to it, with JS defining the ID, onclick, as well as the text. Everything works fine, except for the onclick event triggers on page load instead of when clicked. When inspected, there isn't even a onclick attribute.
Here is an example:
function createEditButton(num) {
var btn = document.createElement("button");
btn.onclick = myFunc();
btn.type = "button";
btn.innerText = "Edit";
btn.id = "editbutton" + num;
return btn;
}
function myFunc() {
alert("hi");
}
document.getElementById('someDiv').appendChild(createEditButton(5));
<div id="someDiv"> </div>
I have even tried adding the event using addEventListener: btn.addEventListener("click", showEditFields(event), false); and it results in the same. I'm not understanding what I'm doing wrong.
It's b/c you are calling the function instead of referencing it:
btn.onclick = myFunc(); /* <-- remove parens */
btn.onclick = myFunc;
While registering btn.onclick as a click callback you are executing function instead of assigning it. you should use addEventListener method to register click events instead of onclick, the benefits of using addEventListener are it can easily register multiple callback while if suppose you are assigning 'onclick' value twice the first value will get replaced.
And to pass value to function you can use bind function. bind will create new function with given context and arguments bound to it. or you can simply create a wrapper function which will execute the call back function with given arguments.
Bind: MDN Docs
See the below example.
function createEditButton(num) {
var btn = document.createElement("button");
btn.addEventListener('click', myFunc);
// Using Bind to pass value
btn.addEventListener('click', myFuncWithVal.bind(btn, num));
// Uaing Wrapper function to pass value
btn.addEventListener('click', function(event) {
alert('wrapper function');
myFuncWithVal(num);
});
btn.type = "button";
btn.innerText = "Edit";
btn.id = "editbutton" + num;
return btn;
}
function myFunc() {
alert("hi");
}
function myFuncWithVal(val) {
alert(val);
}
document.getElementById('someDiv').appendChild(createEditButton(5));
<div id="someDiv"></div>
function createEditButton(num) {
var btn = document.createElement("button");
btn.onclick = myFunc;
btn.type = "button";
btn.innerText = "Edit";
btn.id = "editbutton" + num;
return btn;
}
function myFunc() {
alert("hi");
}
document.getElementById('someDiv').appendChild(createEditButton(5));
<div id="someDiv"> </div>

Categories