Need help in object oriented programming

you are right.

but shouldn’t


	if(selector == undefined)
	{
		alert("selector is undefined");
	}
	else
	{
		alert("selector is:		" + " " + selector);
		alert("Inside Custom_rounded_container");
	}

inside Custom_rounded_container function catch the undefined selector variable though.

When I had


All_rounded_corners_one_element.prototype  = new Custom_rounded_container();

it was displaying that ‘selector is undefined’

but since I changed it to


All_rounded_corners_one_element.prototype  = new Custom_rounded_container(selector, color);

it is displaying the actual selector value.

Let’s make it as it should be.

Take new Custom_rounded_container(selector, color); back to how you started with it

... = new Custom_rounded_container();

And then adjust the Constructor so that the split part will only be done if the selector is not falsy, so that an error won’t be thrown.

this.temp_array = selector && selector.split(" ");

is this what you meant?


function Custom_rounded_container(selector, color)
{
	/*
	if(selector == undefined)
	{
		alert("selector is undefined");
	}
	else
	{
		alert("selector is:		" + " " + selector);
		alert("Inside Custom_rounded_container");
	}
	*/
	alert("Inside Custom_rounded_container");
	if(selector != undefined && color != undefined)
	{
		this.temp_array = selector.split(" ");
		this.color = color;
	}
}

Now


		alert(rounded_container.color);
		alert(rounded_container.temp_array);

inside Factory_rounded_corners function is not working:


function Factory_rounded_corners(selector, color, type, numb_elem)
{
	var rounded_container;
	if(numb_elem == "one" && type == "all_round")
	{
		rounded_container = new All_rounded_corners_one_element(selector, color);
		alert(rounded_container.color);//Does not work
		alert(rounded_container.temp_array); //Does not work
		rounded_container.elements_to_be_affected();//Does not work
		
	}
}

No, what I meant is much simpler, and involved just putting a guard condition on the selector part.


function Custom_rounded_container(selector, color) {
    this.temp_array = [color="green"]selector &&[/color] selector.split(" ");
    this.color = color;
}

So if the selector variable contains a falsy value (which could be undefined, false, null, “”, 0) it will be that falsy value which is assigned to this.temp_array

If selector doesn’t contain a falsy value, it will be considered as a truthy value and execution will carry on to the selector.split(" ") part, which will then be assigned to this.temp_array

That way, regardless of even if selector and/or color are undefined, the properties still get set on the object without causing an error to occur.

Cool, I didn’t know that.

But those two alerts are still not working.

You’ll need to update me with the code you are now using.

I have made few additional changes as well. It has fixed part of the problem.

Total changes made:


function Custom_rounded_container(selector, color)
{
	/*
	if(selector == undefined)
	{
		alert("selector is undefined");
	}
	else
	{
		alert("selector is:		" + " " + selector);
		alert("Inside Custom_rounded_container");
	}
	*/
	alert("Inside Custom_rounded_container");

	this.temp_array = selector && selector.split(" ");
	//alert(this.temp_array);
	this.color = color;
}

Removed this code:


All_rounded_corners_one_element.prototype.superclass = Custom_rounded_container;

Made change in All_rounded_corners_one_element function:


function All_rounded_corners_one_element(selector, color)
{
	alert("Inside All_rounded_corners");
	Custom_rounded_container.call(this);
	//this.superclass(selector, color);
}

Now


function Factory_rounded_corners(selector, color, type, numb_elem)
{
	var rounded_container;
	if(numb_elem == "one" && type == "all_round")
	{
		rounded_container = new All_rounded_corners_one_element(selector, color);
		alert(rounded_container.color);//[COLOR="#FF0000"]Still Not working[/COLOR]
		alert(rounded_container.temp_array); // [COLOR="#FF0000"]Still Not working[/COLOR]
		rounded_container.elements_to_be_affected();[COLOR="#008000"]//Working[/COLOR]
		
	}
}

It has fixed what originally was not working but now what was originally working is now not working…lol

Step by step, that’s the way to do it. Give me a few moments to catch up. I’ve given up any hope of that jsfiddle being updated, and am attempting to match what you’re doing (badly) with local code instead.

Opps sorry I’l update jsfiddle.

First time I’m using it so forgot to update it.

Currently you have mootools loaded, with the javascript activating in the web pages onload event.

You should use no library instead of mootools, change the loading to no wrap (in body).
After that the HTML code should have the scripting code at its end removed, and placed at the end of the scripting section instead.

I don’t think I’m using it correctly. I have done as you said.

After reading the jsfiddle documentation under Fiddle Settings (Sidebar) section:

it says ‘no wrap(body):
do not wrap the JavaScript code, place it in <body> section’

I have now added body tags in html section and moved the javascript code from below the html section to just below the body section.

Is that what you meant?

The updated javascript if it makes it easier:


/* Function	Factory_rounded_corners
*	-------------------------
*	Parameter: selector
*	Return: None
*	Description: Create a rounded container around elements to be affected
*/
function Factory_rounded_corners(selector, color, type, numb_elem)
{
	var rounded_container;
	if(numb_elem == "one" && type == "all_round")
	{
		rounded_container = new All_rounded_corners_one_element(selector, color);
		alert(rounded_container.color);//works
		alert(rounded_container.temp_array); // works
		rounded_container.elements_to_be_affected();//Does not work
		
	}
}
/* Function	All_rounded_corners
*	-------------------------
*	Parameter: selector
*	Return: None
*	Description: Create a rounded container around elements to be affected
*/
function All_rounded_corners_one_element(selector, color)
{
	alert("Inside All_rounded_corners");
	Custom_rounded_container.call(this);
	//this.superclass(selector, color);
}


/*	Function custom_rounded_container
*	----------------------------------
*	Parameters: selector
*	Properties: this.temp_array
*	Methods: this.elements_to_be_affected, this.apply
*	Returns: Returns a object 
*	Description: selector parameter should be in two formats: id of element if only one element is to be affected ie: 'content'
				or id of surrounding element and the tag of the elements to be affected, ie: 'content li' 
*/
function Custom_rounded_container(selector, color)
{
	/*
	if(selector == undefined)
	{
		alert("selector is undefined");
	}
	else
	{
		alert("selector is:		" + " " + selector);
		alert("Inside Custom_rounded_container");
	}
	*/
	alert("Inside Custom_rounded_container");

	this.temp_array = selector && selector.split(" ");
	//alert(this.temp_array);
	this.color = color;
}
Custom_rounded_container.prototype.test = function()
{
	alert("Inside test");
}
/*	Function elements_to_be_affected
*	----------------------------------
*	Parameters: None
*	Properties: None
*	Local variables:	None 
*	Local methods: None
*	Returns: elements in array or one element
*	Description: Custom_rounded_container that retrieves elements to be affected
*/
Custom_rounded_container.prototype.elements_to_be_affected = function()
{
	alert("Inside elements_to_be_affected");
	//alert(this.temp_array.length);

		//return  = document.getElementById(this.temp_array[0]).getElementsByTagName(this.temp_array[1]);
		/*
		children_elements = function(parent_element)
		{
			switch(parent_element.nodeName)
			{
				case 'UL': return parent_element.getElementsByTagName("li");
			}
		}
		*/
		//return children_elements(parent_element[0]);
}

//All_rounded_corners_one_element.prototype.superclass = Custom_rounded_container;
//alert(rounded_container.selector);//works
//alert(rounded_container.color);
//All_rounded_corners_one_element.prototype  = new Custom_rounded_container(selector, color);
All_rounded_corners_one_element.prototype  = new Custom_rounded_container();
All_rounded_corners_one_element.prototype.constructor = All_rounded_corners_one_element;

No, remove ALL of the scripting code from the HTML section. It doesn’t belong there and more importantly, tries to execute before any of the other scripting code has even begun yet to exist.

javascript code at end of the javascript section now.

Don’t forget to remove it from the HTML section.

Opps sorry, all done now.

These lines do work now.

alert(rounded_container.color);//Does not work
alert(rounded_container.temp_array); // Does not work

It is expected behaviour for them to have undefined values when the Constructor is called with undefined values.

Its working now.

I forgot to add

selector and color when calling the parent constructor.


Custom_rounded_container.call(this, selector, color);

Its working now :slight_smile:

Thanks for your help Paul.

Greatly appreciated.