JavaScript - Object Validation

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 ();

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.

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.

Hey all.

I have a simple validation I need to do. I need to just make sure that a Checkbox is checked, and that a Text field has content. Sounds simple but I cannot find any thing that has a check and a text field.

Here what I have. Can I modify this script to do this? A Checkbox MUST be checked and Text field MUST be filled out. This currently does the text field fine, but no Checkbox obviously.

How can I add a checkbox validation to this?

Thats it. Any help is appreciated.

Code:

<script type="text/javascript">

var textFields = ["digsig"]; 

function validateForm( )
{
    var oops = ""; // must initialize this!
    var form = document.sig;

        for ( var t = 0; t < textFields.length; ++t )
        {
              var field = form[textFields[t]];
              var value = field.value.replace(/^\s+/,"").replace(/\s+$/,""); // trim the input
              if ( value.length < 1 ) 
              {
                    oops += "You MUST enter your Digital Signature";
              }
        }
        if ( oops != "" )
        {
            alert("ERROR:" + oops);
            return false;
        }
    }


}

</script>

Hello all, new here Seems like a very nice place to be apart of.

I have my website www.gebcn.com. If you view source you will see all that I have done, but more importantly my problem. I have the JS code at the top there and I am unable to W3C validate my HTML because of the JS. I am using XHTML strict and would like to stay using it.

The JS I have at the top is my form validation code. I am able to do any validating that I need with this "snippet" of code, I have shrank it from my library version just to use for this newsletter. Until now W3C validating was not important now for some reason it is and I am faced with this problem.

I am not a Javascript guy more of a HTML/CSS guy and I can manipulate JS to suit my needs.

<problem>
I have tried to make this "snippet" of JS code an external file but receive multiple errors with the JS calling for the FORM NAME as it is not on the same page. The form NAME=NEWSLETTER is another problem, as W3C says I am unable to use attribute "NAME" in this location.
<problem>

I would like to keep the JS close to how it is now as I have a library to use this JS over and over again.

Any pointers in the right direction or solutions to my problem would be greatly appreciated.

Thanks! Hopefully it is not to hard huh

If there is anything anyone needs, the code pasted here, or anything else please let me know. Thanks again!

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());
                    }
                },
            }
        }
            

​

Greetings,

I have a floating object that work find within my page. However, I would like to only show after a button is clicked.

Any ideas how to do this.

Thanks

Hi All,

(Another Post LOL)

Ive been getting alot of help with js recently THANKS!

One last thing and i shouldnt be on here for a while

How would i go about doing this Code:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="750" height="550" 
codebase="http://active.macromedia.com/flash4/cabs/swflash.cab#version=4,0,0,0"> 
<param name="movie" value="SWF/helicopter.swf">
<param name="quality" value="high">
<param name="menu" value="false">
</object>

into JS using .innerHTML = "Above Stuff";

I always get an error + i dont know how im going wrong with the quotes :S

ANY HELP (GOOD STUFF);

Thanks In Advance,

Jamie.

NOM NOM NOM!

I want to print the name of a field on the screen, but it is just printing "[object HTMLInputElement]", which of course is the object. How can I make the JS print the actual name?

Code:

function validate(field,txt) {
with (field) {
	if (value==null||value=="") {
	field.style.borderColor="#c51717";
	field.style.color="#c51717";
	field.style.backgroundColor="#ffbbbb";
	var fname = field;
	document.getElementById("errorBox").innerHTML = "<p>Please enter your "+ fname +"!</p>";
	return false;
	}
	else { return true; }
	}
}
/*Check whole form for errors*/
function validate_form(thisform) {
	/*With the form script was executed from do the following...*/
	with (thisform) {
	/*Checks if data has been entered into fields*/
	if (validate(username,"Your username is required!")==false) {
		 username.focus(); 
		 return false; 
		 }
	if (validate(password,"Your password is required!")==false) {
		 password.focus(); 
		 return false; 
		 }
	}
}

Another example from Sams Teach Your self JavaScript.

I have created the new object it prints the business cards out that are stored as you can see here.

Code:

function PrintCard() {
	line1 = "<b>Name: </b>" + this.name + "<br>\n";
	line2 = "<b>Address: </b>" + this.address + "<br>\n";
	line3 = "<b>Work Phone: </b>" + this.workplace + "<br>\n";
	line4 = "<b>Home Phone: </b>" + this.homephone + "<hr>\n";
	document.write(line1,line2,line3,line4);
}

function Card(name,address,work,home) {
	this.name = name;
	this.address = address;
	this.workplace = work;
	this.homephone = home;
	this.PrintCard = PrintCard;
}

// Create the objects.
sue = new Card ("Sue Suthers", "123 Elm Street", "555-1234", "555-9876");
chris = new Card ("Chris Suthers", "567 Rum Road", "555-4990", "555-8127");
james = new Card ("James Suthers", "17 Junk Court", "555-3334", "555-1596");
ken = new Card ("Ken Suthers", "1 Frank Circuit", "555-2365", "555-23659");

This is all good and i understand it. It is this the printing part i want to know if there is another way to print all 4 of them by naming them in a different way and looping through to print them i think i just answered my own question but it there a built in way to print all of the different cards? here is the current code.

Code:

//print Cards
sue.PrintCard();
chris.PrintCard();
james.PrintCard();
ken.PrintCard();

Thanks

Hello,

I have a multi-dimensional object, derived from JSON returned by the Foursquare API. The object has the following structure (as printed using a print_r type method from http://www.openjs.com/scripts/others...hp_print_r.php

PHP Code:
    '0' 
        'id' => "27110xxx"
        'created' => "Sun, 11 Apr 10 15:09:45 +0000"
        'timezone' => "America/New_York"
        'user' ...
            'id' => "48xxx"
            'firstname' => "Barry"
            'lastname' => "xxx"
            'photo' => "http://playfoursquare.s3.amazonaws.com/userpix_thumbs/4abb5bxxxxxx.jpg"
            'gender' => "male"
        'display' => "xxxx. @ [off the grid]"
    '1' ...
        'id' => "2538xxxx"
        'created' => "Wed, 07 Apr 10 13:24:41 +0000"
        'timezone' => "Europe/London" 


Could anyone tell me the best way to access its elements? I have this so far which gets the required values, but I want to preserve the order ie. get the data from the first element in the object first, then move to the next - each element represents a user so I want to keep their data separate.

PHP Code:
/* This is a custom function which has the same function as print_r */
    function dump(arr,level) {
        
        var firstName, lastname, geolat, geolong, photo;
        
        var dumped_text = "";
        if(!level) level = 0;
        
        //The padding given at the beginning of the line.
        var level_padding = " ";
        for(var j = 0; j < level + 1; j++) level_padding += "    ";
        
        if(typeof(arr) == 'object') { //Array/Hashes/Objects 
            for(var item in arr) {
                var value = arr[item];
                
                if(typeof(value) == 'object') { //If it is an array,
                    dumped_text += level_padding + "'" + item + "'\n";
                    dumped_text += dump(value,level + 1);
                } else {
                    dumped_text += level_padding + "'" + item + "' => \"" + value + "\"\n";
                }
                
                if (item == 'firstname')   {
                    firstname = value;
                    document.write("First name: " + firstname + "<br />");
                    document.write(item);
                }
                
                if (item == 'lastname')   {
                    lastname = value;
                    document.write("Last name: " + lastname + "<br />");
                    document.write(item);
                }
                
                if (item == 'geolat') {
                    geolat = value;
                    document.write("Latitude: " + geolat + "<br />");
                    document.write(item);
                }
                
                if (item == 'geolong')  {
                    geolong = value;
                    document.write("Longitude: " + geolong + "<br />");
                    document.write(item);
                }
            }
        } else { //Stings/Chars/Numbers etc.
            dumped_text = "===>"+arr+"<===("+typeof(arr)+")";
        }
        return dumped_text;
    }
    
    var myObj = <?php echo json_encode($checkin); ?>;
    
    alert(dump(myObj));

Sorry for the bloated code, I normally work in Java and PHP so although I understand the theory, I haven't worked with objects much in JavaScript before. Any help would be much appreciated!

I am a total JS newb, so please excuse what is probably a very dumb question. I have an autosuggest feature written that creates an object called "autoComplete." this.oDiv is set to the div tag for the suggestions box. For example, here is the call to my constructor:
Code:

// bothStringNames is the array of strings to search through
// param 2 is the textbox the user is typing into
// param 3 is the div suggestion box that appears with autosuggestions
// param 4 is the max # of results to display
new autoComplete(bothStringNames,document.getElementById('searchtxt'),document.getElementById('searchsuggest'),10);

The thing I'm concentrating on now is the "document.getElementById('searchsuggest')." In my constructor, I call this value this.oDiv. Now, when I alert() this value, it says "object HTMLDivElement." I actually need the value "document.getElementById('searchsuggest')." Here is the code where I try to obtain this value:

Code:

// what to return if no results are found.  Only perform this for search feature
alert(this.oDiv);
if(this.oDiv == "document.getElementById(\'searchsuggest\')" && aList.length == 0)
	aList.push("No results found");

"aList" is simply the array of search results from the autosuggest. So, how do I extract the "document.getElementById('searchsuggest') from oDiv instead of the "object HTMLDivElement?"

Thanks!