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);
Related
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
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>
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>
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.
I am currently learning Javascript to understand it better. When you add an item to the list, I would like to have a delete button to remove it.
It seems to me when I do deleteButton.parentNode.parentNode.removeChild(), it should remove the li element, but not sure why this is not working.
JSFiddle here: http://jsfiddle.net/kboucheron/XVq3n/18/
addButton = document.getElementById('addButton');
clearButton = document.getElementById('clearButton');
deleteButton = document.getElementById('deleteButton');
addButton.addEventListener("click", function(e) {
var text = document.getElementById('listItem').value;
var addItem = document.getElementById('output');
var entry = document.createElement("li");
text += ' <button id="deleteButton">Delete</button>';
entry.innerHTML = text;
addItem.appendChild(entry);
});
clearButton.addEventListener("click", function(e) {
var text = document.getElementById('listItem');
var addItem = document.getElementById('output');
addItem.innerHTML = '';
text.value = '';
});
deleteButton.addEventListener("click", function(e) {
deleteButton.parentNode.parentNode.removeChild();
});
If you see your browser console there is an error saying Uncaught TypeError: Cannot call method 'addEventListener' of null it is because there is no element with id deleteButton when the page is loaded.
Also note that the ID of an element must be unique in a document, so since you are adding multiple delete buttons use a class attribute to group them.
Your code should be
//wait for the window onload event
window.onload = function () {
var addButton = document.getElementById('addButton');
var clearButton = document.getElementById('clearButton');
addButton.addEventListener("click", function (e) {
var text = document.getElementById('listItem').value;
var addItem = document.getElementById('output');
var entry = document.createElement("li");
entry.innerHTML = text;
//create a button element
var btn = document.createElement("Button");
btn.innerHTML = 'Delete';
//add button to li
entry.appendChild(btn);
//add a click handler to the button
btn.addEventListener("click", function (e) {
//delete the parent li
this.parentNode.parentNode.removeChild(this.parentNode);
});
addItem.appendChild(entry);
});
clearButton.addEventListener("click", function (e) {
var text = document.getElementById('listItem');
var addItem = document.getElementById('output');
addItem.innerHTML = '';
text.value = '';
});
})
Demo: Fiddle
Since you tag jQuery, you can use a technique call event delegation:
$(document).on('click','.deleteButton', function() {
$(this).parent().remove();
});
In this case, It will helps you to bind the click event to the dynamically created delete button.
Btw, because id is unique so you should use class instead of id for your button
Updated Fiddle