asked on

JavaScript: OO Magic Square

Hi there,
I thought for an exercise that I create a OO Magic Square in JavaScript. I will test if the Magic Square is right by testing if the numbers in the boxes are correct.

I have a single function "Magic Square" which gets a reference to a form that consists of the 9 boxes of the magic square named box11 - box33 where the numbers indicate the row and column number of the box.

The Magic Square function has some additonal functions which create "groups" for the boxes, assign the fields to the "group" and then tests the sum of those boxes in the group.

Here is the structure of the Magic Square:
- this.groups (Array, contains the list of group names)
- this.group.add (Function, 1 parameter, adds new group to the array)
- this.group.test (Function, 2 paramters, tests if group sum equals the value)
- this.group.addfunction (Function, 2 parameters, adds field to a particular group)
- this.check (Function, loops through each of the groups, sums all the field values for the group)

I have tried mutiple ways to place the Group Name Array however each time I call a new group all the previous fields in that group cannot be found.

Is this the best approach for achieving what I intend to do, or is there an alternative method using OO?

Thanks.

<html>
<head>
<script>
function MagicSquare(f)
{
    this.frm=document.forms[f];
    this.groups= new Array();
    this.group.add = ms_add_grp;
    this.group.addfield = ms_add_grp_fld;
    this.check = ms_check;
 
}
 
function ms_add_grp(itemname)
{
    this.group.fields = new Array();
    this.group[this.group.length]=itemname;	
}
 
 
function ms_add_grp(itemname,fldname)
{
    
    this.group[this.group.length].fields[this.group.fields.length]=itemname;	
}
 
 
function ms_check()
{
    for(var i=0;i<this.f.group.length;i++)
    {
	var sumcount = 0;
 
	for(var j=0;j<this.f.group.fields.length;i++)
    	{
	    sumcount = sumcount + this.group[this.group.length].fields[j].value;
 
	}
    }
 
}
 
</script>
</head>
<body>
<form name='frmmgsq'>
<input name='box11'><input name='box12'><input name='box13'><br/>
<input name='box21'><input name='box22'><input name='box23'><br/>
<input name='box31'><input name='box32'><input name='box33'><br/>
 
 
<button onclick='omagicsq.check();'>Check Magic Square</button>
</form>
<script>
	var omagicsq  = new MagicSquare("frmmgsq");
 
	omagicsq.group.add("row1");
	omagicsq.groupField("row1","box11");
	omagicsq.groupField("row1","box12");
	omagicsq.groupField("row1","box13");
	omagicsq.group.test("row1","15");
	
	omagicsq.group.add("row2");
	omagicsq.groupField("row2","box21");
	omagicsq.groupField("row2","box22");
	omagicsq.groupField("row2","box23");
	omagicsq.group.test("row2","15");
 
	omagicsq.group.add("row3");
	omagicsq.groupField("row3","box31");
	omagicsq.groupField("row3","box32");
	omagicsq.groupField("row3","box33");
	omagicsq.group.test("row3","15");
 
	omagicsq.group.add("col1");
	omagicsq.groupField("col1","box11");
	omagicsq.groupField("col1","box21");
	omagicsq.groupField("col1","box31");
	omagicsq.group.test("col1","15");	
 
	omagicsq.group.add("col2");
	omagicsq.groupField("col2","box12");
	omagicsq.groupField("col2","box22");
	omagicsq.groupField("col2","box32");
	omagicsq.group.test("col2","15");	
 
	omagicsq.group.add("col3");
	omagicsq.groupField("col3","box13");
	omagicsq.groupField("col3","box23");
	omagicsq.groupField("col3","box33");
	omagicsq.group.test("col3","15");	
 
</script>
</body>
</html>

Open in new window

HonorGod

Unfortunately, I don't prefer the technique that you chose.
It requires too much code to define the relationship between
the rows, and cells.

In fact this relationship (rows, columns, and cells) it so much
like a table as to suggest that you use a table to represent
the information. I would probably even define the object to
include the generation of the magic square table as part of
the object creation. The result of which could very well be
the html for the table, and automatically generate the cell
names given some kind of prefix.

That way, each cell id attribute would be <prefix> + <row#> + <col#>
(e.g., if prefix == 'box", cell 1,1 would be: "box11")

Does that make sense?

beesknees_1978

ASKER

I would prefer if form and fields are used as is, as they will be integrated as a matrix to be submitted to a database...

however i thinking of changing the groupField function to include the "*" character to find all fields that match that field id, this reducing the code as noted below in the code snippet.

could you give me an idea to approach how and where to store the group array for each "form" and for each "group" how I store each of the "fields" that are in that group.

Rs,

How would I store the array then

omagicsq.groupField("row1","box11");
omagicsq.groupField("row1","box12");
omagicsq.groupField("row1","box13");
 
To
 
omagicsq.groupField("row1","box1*");

Open in new window

ASKER CERTIFIED SOLUTION

HonorGod

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

beesknees_1978

ASKER

Increased points to 170

HonorGod

wow, thank you for the grade & points.

I haven't had a chance to come back, and provide a more complete solution.
Should I?

Let me know.

Good luck & have a great day.