Can we return document.createElement("element")?

Question

I have to create an input box multiple times, so I call a function like this multiple times:

function __createInputBox(id) {
    var input = document.createElement("input");

    input.setAttribute('id', id);
    input.setAttribute('type', 'number');
    input.setAttribute('name', id);
    input.setAttribute('value', '0');
    input.setAttribute('min', '0');

    return input;
}

In my main function, I append it as such:

var box = __createInputBox(id);
element.appendChild(box);

I keep getting this error:

__createInputBox is not defined

So are we allowed to return the value from document.createElement("element")? If its bad to do so, what is the better way to add multiple elements to the page?

This how I declare the function:

function InputSpace(){
this.inputSpace = document.getElementById("inputspace");
this.num = 1;

    function __createInputBox(id) {
       // function  declared here
    }

This is the code where I call it:

InputSpace.prototype = {
constructor: InputSpace,
drawInputSpace : function () {
  var i = 0,
      max;
  var table = document.createElement("TABLE");
  var table_body = document.createElement("TBODY");
  for(max = num; i<num; i++){
        var element = document.createElement("TR");
        var box = __createInputBox(id);
        element.appendChild(box);
        table_body.appendChild(element);
  }
  table.appendChild(table_body);
  this.inputSpace.appendChild(table);
}

Show us the code, this is likely a matter of scope, meaning that to the code where you're calling `__createInputBox` there is no such function — Juan Cortés, Dec 17 '15 at 15:52
Your problem is that the function `__createInputBox` cannot be found! It has nothing to do with whatever is going on *inside* that function. Likely you're defining the function in a different scope... — deceze, Dec 17 '15 at 15:52
__createInputBox undefined its not related to the return.... try to call it after page load — Vanojx1, Dec 17 '15 at 15:52
From the simplistic example you gave it is not possible to recreate the problem you are describing - as others have said, the underlying issue is most likely *where* you are calling the function from. Is this code inside another module or inside some other structure? — Lix, Dec 17 '15 at 15:53
@JuanCortes @Lix @deceze I just added the whole function. Could it be that `__createInputBox` is private thats why its not defined? — sharon, Dec 17 '15 at 16:07
@Vanojx Yes, it works. After declaring it as a global function. How do we call an objects own private function then? — sharon, Dec 17 '15 at 16:15
When not get the element with document.getElementById. If you have an id... — user3806549, Dec 17 '15 at 16:27
@user3806549 I am dynamically creating the elements. So `document.getElementById` wont have anything to return — sharon, Dec 17 '15 at 16:30

score 1 · Accepted Answer · edited May 23 '17 at 10:27

After reading the comments, we can return document.createElement("element") in from a function. The reason for the function is undefined error, was because I was calling a function outside its scope. The proper way to call an object's private function is shown here

Changing the code to access private functions properly:

function InputSpace(){
    // public attributes
    this.inputSpace = document.getElementById("inputspace");
    this.num = 1;
}

InputSpace.prototype = (function(){
     // private functions
     var __createInputBox(id){
     var input = document.createElement("input");

         input.setAttribute('id', id);
         input.setAttribute('type', 'number');
         input.setAttribute('name', id);
         input.setAttribute('value', '0');
         input.setAttribute('min', '0');

         return input;
     }; 
     return {
     constructor: InputSpace,
     // public functions
     drawInputSpace : function () {
         var i = 0,
         max;
         var table = document.createElement("TABLE");
         var table_body = document.createElement("TBODY");
         for(max = num; i<num; i++){
             var element = document.createElement("TR");
             var box = __createInputBox(id);
             element.appendChild(box);
             table_body.appendChild(element);
         }
         table.appendChild(table_body);
         this.inputSpace.appendChild(table);
    }
})();

Can we return document.createElement("element")?

1 Answers1