CODEWITHSUNDEEP
javascripthtml
JUNITY
JUNITY

Reputation: 21

The button don't do the function

I've made a button using javascript, but the onClick event I've set does not seem work.

Here is my code:

function myFunction() {
  console.log('button pressed')
}

var BUTTON = document.createElement("button");
BUTTON.name = "not";
BUTTON.type = "button";
BUTTON.onclick = "myFunction()";
var textBUTTON = document.createTextNode("TEST");
BUTTON.appendChild(textBUTTON);
var output = document.getElementById("test");
output.appendChild(BUTTON);
<div id="test"></div>

The button which is created by javascript appears, but the function, myFunction(), doesn't do anything.

If I make the button manually, with HTML, it works as expected

function myFunction() {
  console.log('button pressed')
}
<button name="not" type="button" onClick="myFunction()">TEST</button>

Upvotes: 2

Views: 120

Answers (6)

vinoth s
vinoth s

Reputation: 198

 var btn = document.createElement("BUTTON");
    var t = document.createTextNode("CLICK ME");
    btn.appendChild(t);
    document.body.appendChild(btn);
btn.setAttribute("id", "democlass");


var eventclick= document.getElementById("democlass");

eventclick.addEventListener("click", RespondClick); 
   function RespondClick() { 
          alert("working");
        }

You can check it.

Upvotes: 0

vinoth s
vinoth s

Reputation: 198

Instead of this code

BUTTON.onclick = "myFunction()"

Replace this code

BUTTON.onclick = myFunction

Upvotes: 0

Mr. Roshan
Mr. Roshan

Reputation: 1805

Try this:-

Make sure to assign function name without "" and () .

Instead of this

BUTTON.onclick = "myFunction()";

Use

BUTTON.onclick = myFunction;


 var BUTTON = document.createElement("button");
 BUTTON.name = "not";
 BUTTON.type = "button";
 BUTTON.onclick = myFunction;
 var textBUTTON = document.createTextNode("TEST");
 BUTTON.appendChild(textBUTTON);
 var output = document.getElementById("test");
 output.appendChild(BUTTON);
 function  myFunction()
 {
 alert('From myFunction')
 }
<div id="test"></div>


<button name="not" type="button"
    onClick="myFunction()">
    TEST
</button>

Upvotes: 0

Terry
Terry

Reputation: 66093

While changing BUTTON.onclick = "myFunction()" to BUTTON.onclick = myFunction will work, you might also want to consider not manually assigning functions to the onclick property, but instead rely on event listeners instead:

// Bind click event listener
BUTTON.addEventListener('click', myFunction);

If you use an anonymous function in the callback, you can bind multiple functions to the same click event:

// Bind click event listener
BUTTON.addEventListener('click', function() {
    myFunction();
});

See proof-of-concept example:

function myFunction() {
  console.log('button pressed')
}

var BUTTON = document.createElement("button");
BUTTON.name = "not";
BUTTON.type = "button";
var textBUTTON = document.createTextNode("TEST");
BUTTON.appendChild(textBUTTON);
var output = document.getElementById("test");
output.appendChild(BUTTON);

// Bind click event listener
BUTTON.addEventListener('click', function() {
  myFunction();
});
<div id="test"></div>

Upvotes: 2

J. Campbell
J. Campbell

Reputation: 364

The issue is with this line:

BUTTON.onclick = "myFunction()";

It should be:

BUTTON.onclick = myFunction;

Upvotes: 7

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

You need to specify the function name without paranthesis and quotes in onclick attribute:

 var BUTTON = document.createElement("button");
 BUTTON.name = "not";
 BUTTON.type = "button";
 BUTTON.onclick = myFunction;
 var textBUTTON = document.createTextNode("TEST");
 BUTTON.appendChild(textBUTTON);
 var output = document.getElementById("test");
 output.appendChild(BUTTON);

function myFunction(){
  console.log('clicked');
}
<div id="test"></div>

Upvotes: 4

Related Questions