JavaScript - Executing Object Methods Is Killing Object Properties

Hello everyone,

I am fairly familiar with the concept of Objects and their properties and methods, but javascript being object based as opposed to object oriented has me stumped on how to access an object's properties from an onclick event handler created for another object created within the original object.

In the example below, I have a constructor function called anyObj. to which I pass an object reference to an element.

anyObj has 3 properties and one function increaseWidth()

increaseWidth() creates a new button with an onclick event handler and this is where I have a problem.

The onclick function needs to increase the value of anyObj's this.width property. I originally had a line this.width += 10; in the onclick but quickly realised why this wasn't working because the this in the onclick function refers to the new button object and not the this.width property of anyObj.

The workaround I have used, and it works, is to make a copy of all the this.xxxxx properties. eg. width = this.width; and use the width variable in the onclick as you can see below. This "workaround" works fine but doesn't feel ideal to me.

So, what I am asking advice on is, is there a better way to access the anyObj()'s properties from within the onclick function than the way I have done it? Obviously I would prefer to not have to make copies of all the anyObj() properties like I have to make them accessible to the onclick function.
Code:

         function anyObj(divObj){
                this.elem = divObj;
                this.width = 50;
                this.height = 50;
                this.increaseWidth=function(){
                    width = this.width;
                    height = this.height;
                    //create a button for this object to be appended to an element later on
                    var newButton = document.createElement('button');
                    newButton.onclick=function(){
                        width += 10;
                        //...
                        //...
                    }
                    //...
                    //...
                }
            }

Hey everyone, I'm a newbie writing a tic tac toe program using OOP. It was simple setting it up so that a player could click on a box to put an X or an O there, but I've run into serious issues when trying to make it so a player couldn't overwrite the AI's choice and the AI couldn't overwrite the player's.

An example of this would be if I made the top right box an X and the AI then made the center box an O, and then I accidentally clicked the center box and made it into an X. I want to prevent that.

Every box on the grid is an object with the property of "taken" that helps the program know if a box is empty or not, so as to avert any overwriting in the first place.

If the box is empty, this.taken = 0. If the box is filled by a player, taken = 1. If filled by AI, taken = 2. I made it matter whether it was AI or human so later i can check if one of them got tic tac toe. Anyway, by default the constructor class sets this.taken = 0. But the method for checking availability and writing the X or O uses a switch which checks if taken = 0. If it is, it sets taken to either 1 or 2 and writes the necessary symbol. If taken = 1 or 2, it just alerts the player that the spot is taken.

But for some reason the switch statement can't tell when taken = anything other than 0. It always executes the code for 0 even though the code for 0 inherently makes it so that taken never equals 0 again, which means case 0 cannot happen anymore.

Below is the code with notes.


Code:

function main(input){//start of main function//
		
	function Click(who, where, what){ //this is the method for checking if it's taken or not and writing the X or O if it isn't//


 /*the argument who represents a number. 0 is no one, 1 is human, 2 is AI; where is a string literal 
representing the spot on the grid*/

		switch(this.taken){
			
			case 0:
			this.taken = who;
			document.getElementById(where).innerHTML = what;
			break;
		
			case 1:
			alert("this spot is taken");
			break;
			
			case 2:
			alert("this spot is taken");
		}//end switch
	}//end Click
			

	function Box(inputhere){//start of class//	
		this.taken = 0;
		this.pick = Click;
	}

//end of Box class//

   //object declarations (I cut out most of them and left only the relevant ones//

	var topleft = new Box();
        var topmid = new Box();
	var topright = new Box();
	var centerright = new Box();

   //end of object declarations//


	switch (input){

/*in each .pick(), the first arg is whether or not a player chose it (1 = player did, 2 = comp did). 
The second arg is which box and the third is whether to put an X or O. The input variable in the switch statement is an argument passed through main() when the 
player clicks on a box. Topleft passes 1.1, topmid passes 1.2 and so on.*/

			case 1.1:{

//The first instance of .pick() in each case is what the player did. The second is what the AI will do in repsonse.//

               
			topleft.pick(1, "topleft", "X");
                        topmid.pick(2, "topmid", "<span>O</span>");

		break;
			}//end of case 1.1
			
			case 1.3:{
			topright.pick(1, "topright", "X");
			centerright.pick(2, "centerright", "<span>O</span>");
		break;
			}//end of case 1.3
	}//end of switch


}//end of main//

Is there anyone who has any idea why on earth this is happening? I've been at it for an embarrassing amount of hours.

Also, thanks to anyone who even considers helping : )
(feel free to flame me if my code sucks or my post is too long or anything).

I HAVE BEEN TRYING TO FIGURE OUT THE PARAMETERS IN THE FUNCTIONS, INCLUDING THE ARRAYS [i], [p], ["get_" + i], ["set_" + i] AND HOW THE METHODS ARE BEING CALLED IN RELATION TO i, p and val, so that I can make sense of this code. If possible can you explain the code also

What I will like to know are the properties and methods of the objects generated in the following code?

Also I want to know how I can use those methods to show and change the name and age for the emp2 object.

this is the code:


function Employee(properties) {
for (var i in properties) {
if (properties.hasOwnProperty(i)
&& typeof properties[i] != 'function')
{
this["get_"+i] = (function(p) {
return function() { return properties[p]; };
})(i);
this["set_"+i] = (function(p) {
return function(val) { properties[p] = val; };
})(i);
}
}
}

var emp1 = new Employee({ name: "Bob", age: 35, foo: function() {} });
var emp2 = new Employee({ name: "Gary", age: 54 });

Hi, every time I try and alert:

[ { number:0, secondnumber:0 }, { number:2, secondnumber:1 }, { number:1, secondnumber:2 } ]

it just shows [object object], [object object], [object object].

Why is this and what can I do to make the record be shown as it is above in an alert?

Thanks.

I can't get any info from Firebug except that one line, uncaught exception [object Object]. The code fully worked, then I needed to make it dynamically create Sortables from the scriptaculous library based on how many X were in a table in my database, which I've done, and I'm thinking it may be a simple slight parse error of some type, I'm not too good with Javascript, because now my script barely works. I've double checked the script's source code, the PHP variables are exactly what they should be.

Code:

print<<<HERE
               Sortable.create('sortlist$box', { tag: 'img', overlap:'horizontal',constraint:false, containment: $list, dropOnEmpty: true, 
                onChange: function(item) {
                    var list = Sortable.options(item).element;
                    
                    if(changeEffect) changeEffect.cancel();
                    changeEffect = new Effect.Highlight('changeNotification', {restoreColor:"transparent" });
                },
            
            
            
            onDrop: function(item) {
            var thing=Sortable.options(item).element.identify();
            
            var anchors = document.getElementById(thing).childNodes.length-2;
            
            if(anchors > 20){
            alert('This box had 20 creatures in it already, your last action has not been saved.');
            window.location.reload();
            }
            else{
            
            new Ajax.Request("saveImageOrder.php", {
                        method: "post",
                        parameters: { data: Sortable.serialize("sortlist$box") }
                    });
               }   
}               
            });
               
HERE;
$box++;

}
?>
          
        });
    </script>

if you solve this I'll send ya $10 via paypal

I'm writing a program that involves a network of interconnected nodes (or simply objects in my example below). It depends on being able to access properties of an object's linked objects (a bit oddly worded, sorry)...

Problem is I'm not sure how to properly access those properties... see below please.

<script>

//This is an example of a problem im having in my own code...
//I want to access the name of the object within the links array wintin the object...

var objA = {name: "Object A", links: [objB, objC]};
var objB = {name: "Object B", links: [objC, objD, objE]};
var objC = {name: "Object C", links: [objB]};
var objD = {name: "Object D", links: [objE]};
var objE = {name: "Object E", links: [objD]};

//ex: I want to access the name of Object A's first link...
console.log(objA.links[0].name);

</script>

I'm hoping to get "Object B"...
But instead I get: TypeError: Result of expression 'objA.links[0]' [undefined] is not an object.
Is there another way around this? Any thoughts are appreciated.

Hi all,

I'm stumped on finding a way in javascript to create an object factory whose instances are also object factories. In short I want something like that below, but no joy ... any clues?


Code:

function createClass () {
	return new createClass()
	function createClass() {
		return new createInstance ()
		function createInstance () {
			//Default properties, values and methods which might later be extended
		}
	}
}

var createDoor = createClass();
var door1 = createDoor();
var door2 = createDoor();

var createChair = createClass();
var chair1 = createChair ();
var chair2 = createChair ();

Ignore post (if mod, please delete)

Hello together!

I generate html code with jsp. In that jsp there a several framesets and frames. And yes i know, frames are not really up to date but it's an old program and i have to deal with it now. Anyway, in the top frameset i have an onload attribute like onload="load()".

In the function load i want to access the Element.prototype object. But unfortunately typeof Element gives me "undefined". So i looked a little deeper and found that window.toString() gives me "[object]" and not as expected "[object window]" so somehow my window doesn't know that its construcor is Window. window.construcor is "undefined" as well. And i don't have access to the Element object. I really don't know where the error could be. When the page is loaded and i access the same window over the console, then everything is right. But in my function a can't get access to the objects i need.

I also don't know what part of the code could be useful to post here, but maybe someone had a similar problem before? i should say that this problem only occurs in IE8. In IE9 it works perfectly.

Has anyone any idea??

Hi all! I'm pretty new to JavaScript and completely new to this forum. I'm James.

Well uh, I'm not sure how to...

I wanted to make something like this using javascript...

Code:

myObject.someMethod('something').anotherProperty

much like the

Code:

document.getElementById('someId').style.morestuff

But the thing is, I've been around every DOM whatnot I can find, I just can't seem to make it work.

I kinda need it to make my own DOM for some API i'm writing. So I can write like...

Code:

function someGreatAPI(){
     this.property1='';
     this.property2='';
     //...
     this.method1 = function(var1){            //this should make my firstMethod
           this.nestedProperty = 0;
           this.nestedMethod = someFunction;  //firstMethods nested method

     }
}

//so I can use it like...

var obj = new someGreatAPI();
obj.method1(10).nestedMethod();

It has to be possible, it's possible with document.getelementbyid, right? it has to be.

Thanks in advance.

Hello.

Is there any way to get the variable name of an object from inside the object?

E.g.

PHP Code:
function Bla(){

    this.write = function(){
    document.write(<objectname>);

    }

}

obj1 = new Bla();
obj1.write(); //Outputs obj1 



Here is my script:

PHP Code:
function myTimer(seconds, obj){
    this.seconds = seconds;
    this.obj = obj;
    this.startTimer = function(){
        if(this.seconds>0){
            this.seconds--;
            this.obj.innerHTML = this.seconds;
            this.timer = setTimeout("Timer.start()",1000);
        }
    }

}
Timer = new Timer(10, obj);
Timer.startTimer(); 



Now the problem is that the variable that contains the object must be named "Timer".

This way I cannot create new timer objects with different variable names

I have tried:
this.timer = setTimeout("this.start()",1000);
but it doesn't work.

That's why it would be good to detect the variable name and instead use something like this:
this.timer = setTimeout(varname+".start()",1000);

I would rather not have to pass the variable name through a parameter like this:
Timer1 = new Timer(10, obj, "Timer1");

Thanks in advance.

Quote:
menu: function( a, b ) {
$( b ).observe( 'click', function( event ) {
event.stop();
if( $( a ).visible() ) {
$( a ).hide();
$( b ).removeClassName( 'selected' );
document.stopObserving( 'click' );
} else {
$( a ).show();
$( b ).addClassName( 'selected' );
document.observe( 'click', function( e ) {
if( e.target.id != a && e.target.id != b && !Element.descendantOf( e.target, $( a ) ) ) {
$( a ).hide();
$( b ).removeClassName( 'selected' );
document.stopObserving( 'click' );
}
});
}
});

$$( '#' + b + ' > a' ).each( function( element ) {
element.observe( 'click', function( event ) {
$( a ).hide();
$( b ).removeClassName( 'selected' );
document.stopObserving( 'click' );
});
});
}
This work's perfrect accept when i use it with others on the menu it leaves the other ones open, how do i get it to close the open one when i open a new menu..

Thanks.

I am trying to troubleshoot my javascript function below.

Code:

<script type="text/javascript">
function txtboxfill(fillobj) {
    var rChar=String.fromCharCode(13);	
    var myVal = "To: " + this.form.to.value + rChar;
    myVal = myVal + "From: " + this.form.from.value + rChar;
    myVal = myVal + "Subj: " + this.form.subj.value + rChar + rChar;
    myVal = myVal + "Message: ";
    fillobj.value = myVal;
}
</script>

Then I have a text box input field with an Code:

<input type="text" id="tp" name="to" size="34" class="totext" onkeyup="txtboxfill(this.form.msg_area);">

and when I enter text in this field it gives me a 'this.form.to' is null or not an object and does not populate the textarea. BTW, msg_area is the id of my textarea.

Thank you.

Code:

function globals()
{
  this.states = "";
}

now I can:

Code:

globals.states = ....

how to extend first code to be able:

Code:

globals.states.something = ....

?

Hello, below you will find two objects, background and photo1, which I need help cleaning up a bit. This will eventually be imported using Json but for now during development it sits as is in my script. I need help with a couple things:

- You will notice the 'val' property is identical in both objects. How can I move this into an outside function that each object can share? I'm having trouble bc I couldn't get 'this' to work outside of its current context.

- Second, how can I restructure this so that I can instantiate a new object. So if I wanted to add a new layer I'd like to do something like importLayers.push[new Layer('photo2')]


Code:

        var importLayers = {
            background: {
                layerType: 'background',
                index: 0,
                layerContent: {
                    content: function() {
                        return $(element).find('#background_Content');
                    },
                    width: 850,
                    height: 530,
                    xPos: 0,
                    yPos: -150,
                    skewX: 0,
                    skewY: 0,
                    angle: 0,
                    originX: function() { return (this.sWidth() / 2); },
                    originY: function() { return (this.sHeight() / 2); },
                    scaleX: 1,
                    scaleY: 1,
                    sWidth: function() { return this.width * this.scaleX; },
                    sHeight: function() { return this.height * this.scaleY; },
                    aspect: 0,
                    opacity: 100,
                    val: function(prop, val) {
                        switch(prop)
                        {
                            case 'width':
                                if(plugin.constrain)
                                    this.scaleX = this.scaleY = val / this.width;
                                else
                                    this.scaleX = val / this.width;
                                break;    
                            case 'height':
                                if(plugin.constrain)
                                    this.scaleY = this.scaleX = val / this.height;
                                else
                                    this.scaleY = val / this.height;
                                break;
                            case 'angle':
                                this.angle = val;    
                        }
                        buildTransformation(this, this.content());
                    }                    
                },
            },
            photo1: {
                layerType: 'photo',
                index: 1,
                layerContent: {
                    content: function() {
                        return $(element).find('#photo1_Content');
                    },
                    width: 1920,
                    height: 1280,
                    xPos: 0,
                    yPos: 0,
                    skewX: 0,
                    skewY: 0,
                    angle: 0,
                    originX: function() { return (this.sWidth() / 2); },
                    originY: function() { return (this.sHeight() / 2); },
                    scaleX: .15625,
                    scaleY: .15625,
                    sWidth: function() { return this.width * this.scaleX; },
                    sHeight: function() { return this.height * this.scaleY; },
                    aspect: 0,
                    opacity: 100,
                    val: function(prop, val) {
                        switch(prop)
                        {
                            case 'width':
                                if(plugin.constrain)
                                    this.scaleX = this.scaleY = val / this.width;
                                else
                                    this.scaleX = val / this.width;
                                break;    
                            case 'height':
                                if(plugin.constrain)
                                    this.scaleY = this.scaleX = val / this.height;
                                else
                                    this.scaleY = val / this.height;
                                break;
                            case 'angle':
                                this.angle = val;    
                        }
                        buildTransformation(this, this.content());
                    }
                },
            }
        }
            

​