How to create a button with onclick with JavaScript?

Question

I have a function that creates a couple of buttons. The problem is that the onclick attribute is not working. How can I use this attribute in JavaScript?

function querySuccess(tx, results) {
    var len = results.rows.length;

    for (var i=0; i<len; i++){
        var name = results.rows.item(i).name;

        var button = document.createElement("button");
        button.className = "buttons";
        button.value = name;
        button.onclick = function() {
            alert("assa");
        };

        var listIt = document.createElement("li");
        listIt.className = "item";
        listIt.appendChild(button);

        var favs = document.getElementById("favs");
        favs.appendChild(listIt);
    }
}

The approach is OK, see developer.mozilla.org/pl/docs/DOM/element.onclick Can you create a demo of your problem on jsfiddle? — Kos
– Kos, Commented Aug 29, 2013 at 11:18
There is nothing obviously wrong with your code. Any JS errors? — Mitya
– Mitya, Commented Aug 29, 2013 at 11:18
It seems already working fine... Check it out..jsfiddle.net/3VXrF — Briskstar Technologies
– Briskstar Technologies, Commented Aug 29, 2013 at 11:21
Caveats: 1. default button type is submit (except in older IE due to bugs), so because you don't return false from the event handler, if the button is in a form, the form will be submitted afterwards. Also setting value on the button does nothing (except in older IE due to bugs); if you want to add text to the button then append a text node to its content, or otherwise use an <input type="button"> where value does correctly affect the text. But otherwise yeah... no obvious problem with calling the handler. — bobince
– bobince, Commented Aug 29, 2013 at 11:26

deostroll · Accepted Answer · 2013-08-30 04:44:29Z

1

The correct way of doing it...is calling addEventListener (in case of Mozilla/webkit browsers) or attachEvent (IE browsers).

function createButton(){
    var btn = document.createElement('button');
    btn.innerHTML = 'Click Me';
    if(btn.addEventListener)
        btn.addEventListener('click',function(){
            alert('hello');
        });
    else
        btn.attachEvent('click',function(){ alert('hello'); });
    document.body.appendChild(btn);
}

See http://jsfiddle.net/L2KD5/

Edit: Check the following link for a more generic implementation: https://gist.github.com/eduardocereto/955642

edited Aug 30, 2013 at 4:44

answered Aug 29, 2013 at 11:24

deostroll

12k22 gold badges94 silver badges168 bronze badges

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

1 Comment

SeinopSys Over a year ago

Or assign the handler function to the first argument of createButton, and use that when adding the handlers instead of writing duplicate code.

Collectives™ on Stack Overflow

How to create a button with onclick with JavaScript?

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related