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
Related
I need to first remove the event listener before dynamically adding more elements which also need the same event listener. I am using an external function name (not an anonymous function) and specifying the same useCapture value in both the add and remove.
The function is nested within another function. < suspected problem was the problem
You can see the problem by clicking the first "add button" more than once. The first click adds one more button, the second click adds two more, the third click adds four more, etc. Each click should only add one more. I guess the return value of removeEventListener is always undefined so I can only tell that removal did not work from the duplicate events.
var app = function() {
console.log('app');
var setup = function() {
console.log('setup');
var addButton = function(e) {
console.log(e);
var button = e.target;
var newButton = document.createElement('BUTTON');
newButton.innerText = 'add another button';
button.parentNode.appendChild( newButton );
setup();
}
var buttons = document.querySelectorAll('button');
for(var i=0; i<buttons.length; i++) {
var button = buttons[i];
button.removeEventListener('mousedown', addButton, false);
button.addEventListener('mousedown', addButton, false);
}
}
setup();
}
app();
<div>
<button>add button</button>
</div>
Removing the addButton function from the nest fixed the problem.
Also, defining app.addButton within app.setup or within the nest causes app.addButton to be overwritten each time app.setup is called which destroys the reference needed for removeEventListener. So the name alone is not all that matters. It must be the original function, not an exact copy.
var app = {};
app.addButton = function(e) {
console.log(e);
var button = e.target;
var newButton = document.createElement('BUTTON');
newButton.innerText = 'add another button';
button.parentNode.appendChild( newButton );
app.setup();
}
app.setup = function() {
console.log('setup');
var buttons = document.querySelectorAll('button');
for(var i=0; i<buttons.length; i++) {
var button = buttons[i];
button.removeEventListener('mousedown', app.addButton, false);
button.addEventListener('mousedown', app.addButton, false);
}
}
app.init = function() {
console.log('app');
app.setup();
}
app.init();
<div>
<button>add button</button>
</div>
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 created a javascript function to dynamically create a button
function btn(d) {
var btn = document.createElement("BUTTON");
var t = document.createTextNode(d);
btn.appendChild(t);
btn.className = "myButton";
btn.onclick = alert('hello');
document.body.appendChild(btn);
}
when this function is called, alert is poping up even if button is not clicked. I want the alert when button is clicked. May be i am missing something. Please help. Thanks
you are calling the alert function not assigning a function
alert('hello'); // evals immediately.
btn.onclick = function () {
alert("Hello World"); // gives the button a click handler
// which can be called when clicked
};
Try doing it with jQuery, like so (per your jQuery tag on the question):
function btn(d) {
var btn = $('<button/>').addClass('myButton').text(d).appendTo('body').click(function (e) {
alert('hello');
})
}
onclick should look like:
btn.onclick = function(){alert('hi');};
You are assigning the return value of alert('hello'); to the onclick, while it is expecting a function. The correct way without jQuery would be
if (btn.addEventListener)
btn.addEventListener ('click',function(){ alert('hello');}, false);
else if (btn.attachEvent)
btn.attachEvent ('onclick',function(){ alert('hello');});
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.