CODEWITHSUNDEEP
javascript
sharon
sharon

Reputation: 123

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

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);
}

Upvotes: 2

Views: 1469

Answers (1)

sharon
sharon

Reputation: 123

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);
    }
})();

Upvotes: 1

Related Questions