richardsimnett
asked on
Javascript Object Issues
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
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();
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER