We help IT Professionals succeed at work.
Get Started

Javascript Object Issues

richardsimnett
on
349 Views
Last Modified: 2012-05-12
Hello,
I am constructing a Javascript menu engine. Its really quite simple, but I decided to build it in a Object Oriented fashion so it could easily be re-used.

It has a few functions: initialization, deSelect, setSelected, up, down, left, right, ok.

Each of the functions are defined associatively (this.deSelect = function(){ //code here};)

THe problem I am having is this:

when I try to call a function that exists within the object, from within the object, I get the following error:

Uncaught TypeError: Object  has no method 'deSelect'

An example of this is the "up" function in the code provided. It needs to deSelect the current item, then set the newly selected item "selected" using the setSelect method. On both deSelect() and setSelect() I get the error.

I can figure out why this is... can someone please tell me what Im doing wrong?

Worth 500 points.

Thanks,
Rick
/* 
 * menuEngine.js
 * Written By: Rick Simnett
 * This object controls the menuing system for the simulator. There are two types of menus:
 * grid and vertical.
 */

function menuEngine()
{
    this.menutype = 0; //0 = vertical menu, 1 = grid menu
    this.menudata = []; //this is a data container array that defines the menu and the corresponding events
    this.verticalPostion = 0; //this is the place holder for the current vertical position
    this.horizontalPosition = 0; //this is the place holder for the current horizontal position
    
    //initialize() - this function initializes the menu engine with menu data and the type of menu to render
    this.initialize = function(data,type)
    {
        this.menutype = type;
        this.menudata = data;

        this.renderMenu();
    }

    //setSelected() - this function sets the highlighted menu item based on the vertical & horizontal positions
    this.setSelected = function()
    {
        if (this.verticalPosition)
            alert(this.verticalPosition);

        if (this.menutype == 0)
            $("#row" + this.verticalPosition).attr("class","vertical_selected");
        else
            $("#grid" + this.verticalPosition + this.horizontalPosition).attr("class","grid_selected");
    }

    //deSelect() - this function sets the highlighted menu item based on the vertical & horizontal positions
    this.deSelect = function()
    {
        if (this.menutype == 0)
            $("#row" + this.verticalPosition).attr("class","");
        else
            $("#grid" + this.verticalPosition + this.horizontalPosition).attr("class","");
    }

    //renderMenu() - this function actually renders the menu on the screen
    this.renderMenu = function()
    {
        if (this.menutype == 0)
        {
            //render a vertical menu
            html = "<ul class=\"vertical-menu\">";

            for(var i = 0; i < this.menudata.length; i++)
                html += "<li id=\"row" + i + "\">" + this.menudata[i]['menuitem'] + "</li>";

            html += "</ul>";

            //initialize the vertical positions
            this.verticalPosition = 0;

            //initialize the horizontal position
            this.horizontalPosition = 0;
            
            //write the menu to the screen
            $("#screen").html(html);

            //select the current position
            this.setSelected();
        }
        else
        {
            //render a grid menu
        }
    }

    //up() - this function means that 'up' was pressed on the keypad
    this.up = function()
    {
        this.deSelect();

        //its a vertical menu and up was pushed so lets figure out what menu item it should be on
        if (this.verticalPosition == 0)
            this.verticalPosition = this.menudata.length - 1;
        else
            --this.verticalPosition;

        this.setSelected();
    }

    //down() - this function means that 'down' was pressed on the keypad
    this.down = function()
    {
        //this.deSelect();
        
        //its a vertical menu and down was pushed so lets figure out what menu item it should be on
        if (this.verticalPosition == this.menudata.length-1)
            this.verticalPosition = 0;
        else
            ++this.verticalPosition;

        this.setSelected();
    }

    //left() - this function means that 'left' was pressed on the keypad
    this.left = function()
    {
        //this.deSelect();
        
        if (this.menutype == 1)
        {
            //its a grid menu and left was pushed
            if (this.horizontalPosition == 0)
                this.horizontalPosition = this.menudata[0].length - 1;
            else
                --this.horizontalPosition;

            this.setSelected();
        }
    }

    //right() - this function means that 'right' was pressed on the keypad
    this.right = function()
    {
        //this.deSelect();

        if (this.menutype == 1)
        {
            //its a grid menu and right was pushed
            if (this.horizontalPosition == this.menudata[0].length - 1)
                this.horizontalPosition = 0;
            else
                ++this.horizontalPosition;

            this.setSelected();
        }
    }

    //ok() - this function means that 'ok' was pressed on the keypad and fires off the corresponding event
    this.ok = function()
    {
        if (this.menudata[this.verticalPosition])
            if (this.menutype == 0)
                this.menudata[this.verticalPosition]['event']();
            else
                this.menudata[this.verticalPosition][this.horizontalPosition]['event']();
    }
 
}

var menusystem = new menuEngine();

Open in new window

Comment
Watch Question
Analyst developer
CERTIFIED EXPERT
Commented:
This problem has been solved!
Unlock 1 Answer and 2 Comments.
See Answer
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE