CODEWITHSUNDEEP
javascripthtmldominputappendchild
cvoigt
cvoigt

Reputation: 587

Dynamically generating a button using DOM and editing onclick event

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>

Upvotes: 0

Views: 5214

Answers (3)

GreenGiant
GreenGiant

Reputation: 521

          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.

Upvotes: 0

Alexander Pavlov
Alexander Pavlov

Reputation: 32296

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>​

Upvotes: 3

Naftali
Naftali

Reputation: 146310

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

Upvotes: 0

Related Questions