Dynamically generating a button using DOM and editing onclick event

Question

I trying to generate an input (type="button") and setting the onclick-Event to a function, which should hand over a parameter. The whole object should be appended to a div and thats it. Basically this is my try, but I can't see why it does not work.

I pasted the code to jsfiddle, hence its easier for you to reproduce. Click here.

What am I'm doing wrong? I'm learning it by trial and error, so please explain whats wrong. Thanks a lot!

[edit] for the case jsfiddle will be down one day, here is the code I tried to run... :)

<!doctype html>
<html>
<head>
<title>onclick event example</title>
<script type="text/javascript" language="javascript">
var i = 0;
var h = new Array();

function addButton() {
    i++;
    var container = document.getElementById("check0");

    var h[i] = document.createElement("input");
    h[i].type = 'button';
    h[i].name = 'number' + i;
    h[i].value = "number" + i;
    h[i].id = 'number' + i;

    h[i].onclick = function() {
        showAlert(i)
    };

    container.appendChild(h[i]);
}

function showAlert(number) {
    alert("You clicked Button " + number);
}
</script>
</head>
<body>
<div id="check0">
        <input type="button" value="klick mich" id="number0" onclick="addButton()"/>
</div>
</body>
</html>

Put the code in there. What if jsfiddle's down tomorrow? – Florian Margaine May 22 '12 at 16:32 — Florian Margaine, May 22 '12 at 16:32

Alexander Pavlov · Accepted Answer · 2012-05-22T16:39:30.543

3

Here is the fixed fiddle for you.

var h[i] = ... is invalid JavaScript.

What you write in the "JavaScript" frame on jsfiddle is executed onload, so this code is not yet present when the HTML you provide is executed (and neither is the addButton() function).

<script>
var i = 0;
var h = new Array();

function addButton() {
    i++;
    var container = document.getElementById("check0");

    h[i] = document.createElement("input");
    h[i].type = 'button';
    h[i].name = 'number' + i;
    h[i].value = "number" + i;
    h[i].id = 'number' + i;

    h[i].onclick = function() {
        showAlert(i)
    };

    container.appendChild(h[i]);
}

function showAlert(number) {
    alert("You clicked Button " + number);
}
</script>

<div id="check0">
    <input type="button" value="klick mich" id="number0" onclick="addButton()"/>
</div>

edited May 22 '12 at 16:39

answered May 22 '12 at 16:30

Alexander Pavlov

31,598
5
67
93

If jsfiddle is down, the entire question will not make any sense :) Let me try... – Alexander Pavlov May 22 '12 at 16:34
Yep, I added a comment to the question too :-) – Florian Margaine May 22 '12 at 16:35
Alexander, in [your fix](http://jsfiddle.net/yzeVm/2/) is still a closure issue, note that all the buttons alerts the last index. [Here](http://jsfiddle.net/yzeVm/4/) is a modified version with a closure around the alert function – Gabriel Jürgens May 22 '12 at 16:41
@GabrielJürgens: yeah, thanks for the fix. I just made the code run with no JS errors reported and didn't go beyond that. – Alexander Pavlov May 22 '12 at 16:47
@GabrielJürgens could you please explain your fix? I see what you have changed, but actually don't understand what happens there... – cvoigt May 22 '12 at 23:54
@AlexanderPavlov thank you very much for your quick response. I should have seen the "var [i] = ..." thing - but I was just to blind... :) Furthermore I did not know about the onload behavior of jsfiddle. Thanks for this hint! – cvoigt May 22 '12 at 23:57
@vogti, what I did, is commonly called a **closure**, and as you can see [here](http://stackoverflow.com/a/111111/1382292), you are not alone wondering how they work. For me, is very difficult to explain colsures in a couple words, and my english is not as good as I need, so I recommend you read the link I gave you above, but basically the problem is that you need to freeze the value of `i` passed to `showAlert` at the time of the `h[i].onclick` is declared, because if you don't, all the `onclick` of the dynamically generated buttons, will pass the last value of the goblal `var i`. – Gabriel Jürgens May 23 '12 at 04:01
@GabrielJürgens Thank you for your explanation. I'm going to study the link you gave! – cvoigt May 23 '12 at 16:59

score 0 · Answer 2 · answered May 22 '12 at 16:31

0

Try using h.push(...) instead of trying to send to a non created element in the array

answered May 22 '12 at 16:31

Naftali

144,921
39
244
303

score 0 · Answer 3 · answered May 22 '12 at 18:31

          var x = document.getElementById('pagination');//pagination is an empty div in html
    var y ='';
    for(var i = 0; i <= (pageMax); i++){
        y = y+"<a id ='pageNumber"+i+"' onclick='changePage("+(i+1)+");'>"+(i+1)+"</a>\n ";
        } x.innerHTML=y }

i used this to make a pagination for a table. The function will create a row of numbers until button max. 'changePage("+(i+1)+"); ... will call a function and send the i index(number that the page is) of the pagenumber. also i dynamically create a id unique for each number.

Dynamically generating a button using DOM and editing onclick event

3 Answers3