Create a Button in Javascript

Question

Hey i want to create a button like this:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="button" value="click-me" id="myButton" onclick="myFunction()">
</body>
</html>

but i want to create from javascript, and i'm doing something really wrong cause my button does not seem

var MyButton = document.createElement("BUTTON");
MyButton.id = "Mybuttonid";
MyButton.className = "MyButtonclass";
MyButton.onclick("myFunction()");
Div.appendChild(MyButton); //i have others things working in this "Div" only this button doesn't appear

Zakaria Acharki · Accepted Answer · 2017-05-31 16:40:42Z

1

You've a misuse of onclick in the posted code, if you check the console you could notice the following message :

"Uncaught TypeError: MyButton.onclick is not a function"

To attach the click event using the onclick it should be :

MyButton.onclick = myFunction;

Else it will be better to attach the event using addEventListener() instead like :

MyButton.addEventListener("click", myFunction);

Hope this helps.

var Div = document.getElementById("my_div");


var MyButton = document.createElement("BUTTON");
MyButton.id = "Mybuttonid";
MyButton.className = "MyButtonclass";
MyButton.addEventListener("click", myFunction);
Div.appendChild(MyButton);

function myFunction(){
  alert('test');
}

<div id="my_div"></div>

edited May 31, 2017 at 16:40

answered May 31, 2017 at 16:26

Zakaria Acharki

67.5k15 gold badges78 silver badges106 bronze badges

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

7 Comments

Victor Hugo Over a year ago

This was a mistake when I was writing this post, all the names are right, I've already edited.

Zakaria Acharki Over a year ago

Ooh i see, Updated my post.

Pedro Chiiip Over a year ago

@ZakariaAcharki MyButton.onclick = myFunction(); doesn't work, or at least not in jsfiddle. It got to be MyButton.onclick = function(){ myFunction() };, as i have done in my answer.

Zakaria Acharki Over a year ago

It should be MyButton.onclick = myFunction; note the extra () you've in your example.

Zakaria Acharki Over a year ago

You should'nt :D , fixed

|

Manos Kounelakis · Accepted Answer · 2017-05-31 16:27:51Z

0

You are doing it wrong because Button does not exists(but MyButton exists). Instead of :

var MyButton = document.createElement("BUTTON");
MyButton.id = "Mybuttonid";
MyButton.className = "MyButtonclass";
MyButton.onclick("myFunction()");
Div.appendChild(MyButton);

answered May 31, 2017 at 16:27

Manos Kounelakis

3,2125 gold badges38 silver badges68 bronze badges

Comments

XYZ · Accepted Answer · 2017-05-31 16:28:18Z

Use addEventListener to add click event to the button; And change Div.appendChild(button); to Div.appendChild(MyButton);

function myFunction(){
  alert("here");
}

var Div = document.getElementById('div');

var MyButton = document.createElement("button");
MyButton.id = "Mybuttonid";
MyButton.innerHTML ="CLICK ME"
MyButton.className = "MyButtonclass";
MyButton.addEventListener("click", myFunction, false);
 
Div.appendChild(MyButton); //i have others think working in this "Div" only this button doesn't appear

<div id="div">
</div>

Pedro Chiiip · Accepted Answer · 2017-05-31 16:29:38Z

In both HTML and Javascript, you are declaring your onclick function the wrong way. Instead of

<input type="button" value="click-me" id="myButton" onclick"myFunction()">

it should be

<input type="button" value="click-me" id="myButton" onclick="myFunction()">

Which means that this piece of code in Javascript here:

MyButton.onclick("myFunction()");

Should be

   MyButton.onclick = function(){ myFunction() };

By doing this and solving the typo that other users mentioned, it should work just fine.

Collectives™ on Stack Overflow

Create a Button in Javascript

4 Answers 4

7 Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

Comments

Comments

Comments

Related