CODEWITHSUNDEEP
javascriptjqueryclass
Vishnuraj
Vishnuraj

Reputation: 71

Undefined object after defining a class

I'm adding three buttons and managing it with single class. But I'm getting this undefined error. 

var jQuery = jQuery.noConflict();
jQuery(function(){

   var sampTool = new loadToolBar('pageContent');

   sampTool.addImgBtn("fontMore","img/plus.png");  // Uncaught TypeError: undefined is not a function 
   sampTool.addImgBtn("fontLess","img/minus.png");
   sampTool.addImgBtn("printPage","img/printer.png");


   jQuery('#fontMore').click(function(){
      sampTool.zoom('pageContent','+=2px');
   });


   jQuery('#fontLess').click(function(){
      sampTool.zoom('pageContent','-=2px');

   });

   function loadToolBar(fileBody) // Class definition 
   {
      var toolBar = document.createElement("div");
      toolBar.className = "oasys-toolbar";
      toolBar.id = "oasys-toolbar";
      jQuery(toolBar).insertBefore("#"+fileBody);

   } 

   /*--------------------- Prototypes------------------------*/

   loadToolBar.prototype.addImgBtn = function(itemID,itemPath)
   {

      var newIcon = document.createElement("img");
      newIcon.id=itemID;
      newIcon.src = itemPath;
      newIcon.className = "oasys-toolbar-item oasys-toolbar-btn";
      document.getElementById('oasys-toolbar').appendChild(newIcon);
   }

   loadToolBar.prototype.zoom = function(containerID,size)
   {
      jQuery("#"+containerID+" *").css("font-size",size);
   }



});

Thanks in advance

Upvotes: 0

Views: 70

Answers (3)

gwokae
gwokae

Reputation: 76

When you called loadToolBar.addImgBtn() the funciton, addImgBtn, is not yet assigned to loadToolBar.prototype.

You need to run your class declaration then execute it. I'll write like:

var jQuery = jQuery.noConflict();

function loadToolBar(fileBody) // Class definition 
{
  var toolBar = document.createElement("div");
  toolBar.className = "oasys-toolbar";
  toolBar.id = "oasys-toolbar";
  jQuery(toolBar).insertBefore("#" + fileBody);

}

/*--------------------- Prototypes------------------------*/

loadToolBar.prototype.addImgBtn = function(itemID, itemPath) {

  var newIcon = document.createElement("img");
  newIcon.id = itemID;
  newIcon.src = itemPath;
  newIcon.className = "oasys-toolbar-item oasys-toolbar-btn";
  document.getElementById('oasys-toolbar').appendChild(newIcon);
};

loadToolBar.prototype.zoom = function(containerID, size) {
  jQuery("#" + containerID + " *").css("font-size", size);
};

jQuery(function() {
  // This function runs after `document.ready`. But your constrator don't need to declare after dom ready 

  var sampTool = new loadToolBar('pageContent');
  sampTool.addImgBtn("fontMore", "img/plus.png"); // Uncaught TypeError: undefined is not a function 
  sampTool.addImgBtn("fontLess", "img/minus.png");
  sampTool.addImgBtn("printPage", "img/printer.png");

  jQuery('#fontMore').click(function() {
    sampTool.zoom('pageContent', '+=2px');
  });

  jQuery('#fontLess').click(function() {
    sampTool.zoom('pageContent', '-=2px');

  });
});

Upvotes: 2

Sampath Liyanage
Sampath Liyanage

Reputation: 4896

The functions are not defined when you create the object in your code. Try reordering like this, 

var jQuery = jQuery.noConflict();
jQuery(function(){

   function loadToolBar(fileBody) // Class definition 
   {
      var toolBar = document.createElement("div");
      toolBar.className = "oasys-toolbar";
      toolBar.id = "oasys-toolbar";
      jQuery(toolBar).insertBefore("#"+fileBody);

   } 

   /*--------------------- Prototypes------------------------*/

   loadToolBar.prototype.addImgBtn = function(itemID,itemPath)
   {

      var newIcon = document.createElement("img");
      newIcon.id=itemID;
      newIcon.src = itemPath;
      newIcon.className = "oasys-toolbar-item oasys-toolbar-btn";
      document.getElementById('oasys-toolbar').appendChild(newIcon);
   }

   loadToolBar.prototype.zoom = function(containerID,size)
   {
      jQuery("#"+containerID+" *").css("font-size",size);
   }


   var sampTool = new loadToolBar('pageContent');

   sampTool.addImgBtn("fontMore","img/plus.png");  // Uncaught TypeError: undefined is not a function 
   sampTool.addImgBtn("fontLess","img/minus.png");
   sampTool.addImgBtn("printPage","img/printer.png");


   jQuery('#fontMore').click(function(){
      sampTool.zoom('pageContent','+=2px');
   });


   jQuery('#fontLess').click(function(){
      sampTool.zoom('pageContent','-=2px');

   });
});

Upvotes: 2

Busiek
Busiek

Reputation: 13

As Xlander wrote try to move the class definition and prototypes outside of the onload function or just put them in the code before you try to use them.

Upvotes: 0

Related Questions