Dyanamically duplicate the div using textbox value (Number) using javascript -

i creating poc. in 1 scenario have enter number in text box based on count of number div has generate id have created variable call count assigning count loop div , button generating id. not happening when enter number in textbox.

here code

function createelements(){     var count = 5,        fragment = document.createdocumentfragment();     (var j = 0; j < count; ++j) {         div = document.createelement('div');         button = document.createelement('button');         button.classname = "btn";         button.setattribute('id', ['pag_navg' + j]);         button.innerhtml=[1 + j];          div.classname = "page";         div.setattribute('id', ['page' + j]);          div.style.position="absolute";                     fragment.appendchild(div);         fragment.appendchild(button);     }     document.body.appendchild(fragment); } 

here fiddle link

kindly me.

thanks in advance.

i see duplicating ids of elements using so. keep track of using global counter.

// maintain variable holds current value var totalcount = 0; function createelements(){  var count = document.getelementbyid("inputadd_page").value;     // gaurd condition     // if number     if(count && !isnan(count)) {         fragment = document.createdocumentfragment();         (var j = 0; j < count; ++j) {             div = document.createelement('div');             button = document.createelement('button');             button.classname = "btn";             button.setattribute('id', ['pag_navg' + totalcount + j]);             button.innerhtml=[1 + j];              div.classname = "page";             div.setattribute('id', ['page' + totalcount + j]);              div.style.position="absolute";                         fragment.appendchild(div);             fragment.appendchild(button);             totalcount++;         }       document.body.appendchild(fragment);     } } 

check fiddle

edit

also avoid binding events inline. use vanilla js bind events helps in separation of concerns.

   // maintain variable holds current value var inputelement = document.getelementbyid("inputadd_page"),     totalcount = 0; debugger; inputelement.addeventlistener('blur', function() {     var count = this.value;     // gaurd condition     // if number     if(count && !isnan(count)) {         fragment = document.createdocumentfragment();         (var j = 0; j < count; ++j) {             div = document.createelement('div');             button = document.createelement('button');             button.classname = "btn";             button.setattribute('id', ['pag_navg' + totalcount + j]);             button.innerhtml=[1 + j];              div.classname = "page";             div.setattribute('id', ['page' + totalcount + j]);              div.style.position="absolute";                         fragment.appendchild(div);             fragment.appendchild(button);             totalcount++;         }       document.body.appendchild(fragment);     } }); 

edited fiddle