How do you dynamically display a button using JavaScript?

Question

Below I have code where I am trying to dynamically create a button using Javascript (I don't want to just create a button with HTML) When I locally run the web page no button appears.

The buttonActionFunction is a separate function I have (that is fully working) where an image appears when the button is clicked.

Also how do I add to that code so that once the button is clicked that the button deactivates so they can't click it again?

<script>
    function buttonFunction() {
        var button= document.createElement("button");
        button.appendChild(document.createTextNode("Click Me"));
        button.onclick=buttonActionFunction();
        document.getElementById("divId").appendChild(button);
    }
    buttonFunction();
    </script>

@PunitGajjar I don't understand what you mean, I'm new to Javascript! — Jill
– Jill, Commented Nov 17, 2016 at 13:19

lordkain · Accepted Answer · 2016-11-17 13:25:07Z

2

 function createButton(context, func) {
     var button = document.createElement("input");
     button.type = "button";
     button.value = "Click Me";
     button.onclick = func;
     context.appendChild(button);
 }
 function functienaam()
 {
     createButton(document.body, functienaam);
 }
 createButton(document.body, functienaam);

jsfiddle : https://jsfiddle.net/fv42orad/1/

answered Nov 17, 2016 at 13:25

lordkain

3,1191 gold badge16 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jill Over a year ago

That is great thanks, I got it working! I just made some slight changes. Where you had functienaam I added my function that gave the action for the button and then at the botton when you have createButton I just removed the stuff in brackets and now it works perfectly. Thank so much for your help you absolute legend

ps-aux · Accepted Answer · 2016-11-17 13:29:28Z

0

Add <div id="divId"></div> to your html

As for disabling the button on click

   function buttonActionFunction(e) {
        e.target.disabled = true
    }

and button.onclick=buttonActionFunction; not button.onclick=buttonActionFunction();

edited Nov 17, 2016 at 13:29

answered Nov 17, 2016 at 13:25

ps-aux

12.2k27 gold badges86 silver badges139 bronze badges

2 Comments

gkb Over a year ago

to add to it, button.onclick=buttonActionFunction(); should rather be button.onclick=buttonActionFunction;

ps-aux Over a year ago

Then make sure that <div> is declared in html doc before the js code :)

Community · Accepted Answer · 2017-05-23 12:30:48Z

0

Based on @lordKain answer I've updated the code to disable the previous button when it is clicked, as shown bellow:

function createButton(context){
    var button = document.createElement("input");
    button.type = "button";
    button.value = "Click Me";
    button.onclick = function() {functienaam(button)};
    context.appendChild(button);
}
 function functienaam(button)
 {
 createButton(document.body);
 button.disabled = true;
 }
createButton(document.body);

https://jsfiddle.net/5unLc5xr/

edited May 23, 2017 at 12:30

CommunityBot

11 silver badge

answered Nov 17, 2016 at 13:45

CleitonCardoso

861 silver badge8 bronze badges

Collectives™ on Stack Overflow

How do you dynamically display a button using JavaScript?

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related