I added an onclick attribute to a new button but it only works on the old one

Question

So I am still new to coding and I was just coding quite random stuff when I found out something that is probably me being a bit stupid and not understanding whats fully going on but I thought I'd come over here to ask, why does the generated buttons created not log "test" to the console but the original does and what am I doing wrong?

function newButton() {
  var btn = document.createElement("button");
  btn.id = "button";
  var btnText = document.createTextNode("Click me");
  btn.appendChild(btnText);
  document.body.appendChild(btn);
  document.getElementById("button").onclick = console.log("test");
}

<button id="addButton" onclick="newButton();">Add a button</button>

Thank you very much

The problem is that you're setting the new button's `onclick` to the *result* of the `console.log()` call. Which is `undefined`. You need to use an anonymous function: `.onclick = function() { console.log("test"); };` — , Jul 25 '17 at 21:07
I am not sure whether you changed the code in js fiddle, looks like its working now. I can see the message 'test' in my console. — mssnrg, Jul 25 '17 at 21:15
@mssnrg It does appear in the console, but not when the button is clicked, as it should, because OP isn't wrapping it. — , Jul 25 '17 at 21:18
Possible duplicate of [Add onclick event to newly added element in JavaScript](https://stackoverflow.com/questions/3316207/add-onclick-event-to-newly-added-element-in-javascript) — , Jul 25 '17 at 21:20
@pethel pointed out the problem in is answer below and he got downvoted 3 times for his trouble. — Will, Jul 25 '17 at 21:21
@Will That's because he missed the actual problem. I did retract my downvote though. — , Jul 26 '17 at 08:35

score 0 · Answer 1 · edited Jul 25 '17 at 21:25

0

At least one issue with your code is that you have many buttons with the same id of "button". I haven't looked more into this than this.

<body>

<button id="button">Click me</button><button id="button">Click me</button><button id="button">Click me</button><button id="button">Click me</button><button id="button">Click me</button><button id="button">Click me</button><button id="button">Click me</button><button id="button">Click me</button></body>

edited Jul 25 '17 at 21:25

Joshua

426
1
10
18

answered Jul 25 '17 at 21:06

pethel

5,397
12
55
86

What with the down votes. Its for sure one of his issues. – pethel Jul 25 '17 at 21:08
No I am not @frozen .. he generates many of these. – pethel Jul 25 '17 at 21:08
You are correct, but another issue is in Chris G's comment to OP. I didn't downvote. – frozen Jul 25 '17 at 21:10
For reference, the OP's question originally contained this link: https://jsfiddle.net/3zLu5k8k/ – Jul 25 '17 at 21:16

score 0 · Answer 2 · answered Jul 25 '17 at 21:13

function newButton() {
  var button = document.createElement("button");
  button.innerHTML = "Click Me";

  // you have a reference to the button here, so add a handler to it
  button.addEventListener('click', () => console.log('test'));

  document.querySelector('#newButtons').appendChild(button);
}

<button id="addButton" onclick="newButton();">
    Add a button</button>
<div id="newButtons"></div>

score 0 · Answer 3 · answered Jul 25 '17 at 21:27

Rename the button id within the function and add onClick function call. There are two buttons with same id 'button'. Rename either of those ids and add .onClick function. It will work

function newButton() {
        var btn = document.createElement("button");
        btn.id = "buttonnew";
        var btnText = document.createTextNode("Click me");
        btn.appendChild(btnText);
        document.body.appendChild(btn);
        document.getElementById("buttonnew").onclick = function() { 
  console.log("test"); };
    }

score 0 · Answer 4 · answered Jul 26 '17 at 09:32

Your primary problem is on the onclick assignment in your newButton function.

You're calling console.log("test") which returns undefined, and so "test" is logged to the console and the return value from the log is assigned to on click instead of the logging function, in other words:

document.getElementById("button").onclick = undefined // console.log(...) returns undefined;

You need to wrap your call in another function:

function newButton() {
    var btn = document.createElement("button");
    btn.id = "button";
    var btnText = document.createTextNode("Click me");
    btn.appendChild(btnText);
    document.body.appendChild(btn);
    document.getElementById("button").onclick = function(){
        console.log("test")
    }
}

<button id="addButton" onclick="newButton();">Add a button</button>

With this change the function:

function(){
    console.log("test")
}

will be called whenever you press the button.

Your next problem is that you're using getElementById when if you add buttons multiple times, they'll all have the same Id and only the first will have the event handler, you can fix this by adding the onclick to btn instead of getting the button by it's Id:

function newButton() {
    var btn = document.createElement("button");
    btn.id = "button";
    var btnText = document.createTextNode("Click me");
    btn.appendChild(btnText);
    btn.onclick = function(){
        console.log("test")
    }
    document.body.appendChild(btn);
}

<button id="addButton" onclick="newButton();">Add a button</button>

I added an onclick attribute to a new button but it only works on the old one

4 Answers4