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>
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'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);
I've got some functions...
function myFunction()
{
var btn = "<input type='button' onclick='sf();'>";
var t = document.createTextNode("FINISH GAME");
btn.appendChild(t);
document.body.appendChild(btn);
};
function sf(){window.alert("You finished the game!")};
..and a button that activates the first function.
<button onclick="myFunction()">Click Me!</button>
So when I click on the "Click Me"-button, another button should be created, with the text "FINISH GAME". When clicking on that second button, the text "You finished the game!" should be alerted.
But clicking on the first button, nothing happens. Where's the coding error? Where did I forget a comma? ;)
You are creating input element in wrong way.
function myFunction()
{
var btn = document.createElement('input');
btn.setAttribute('type' , 'button');
btn.setAttribute('value', 'FINISH GAME');
document.body.appendChild(btn);
btn.addEventListener('click','sf',false);
};
function sf(){window.alert("You finished the game!")};
how to create element in JavaScript
It is because your variable btn is not a DOM element but string. You can create input element and set all its attributes like this:
function myFunction() {
var btn = document.createElement('input');
btn.setAttribute('type', 'button'); // input element of type button
btn.setAttribute('value', 'FINISH GAME');
btn.onclick = sf;
document.body.appendChild(btn);
};
or:
function myFunction() {
var btn = document.createElement('button'); // button element
var t = document.createTextNode("FINISH GAME");
btn.appendChild(t);
btn.onclick = sf;
document.body.appendChild(btn);
};
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.