SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Why can't I have two functions in one object literal?

    Hi
    I'm working on some JavaScript code I hope will eventually be part of a JavaScript Firefox extension. The code uses an object literal which has two functions in it as value property pairs. My problem is it appears two functions are not allowed, but one is. I do not know why this should be so I would appreciate if you could look at the code and tell me what's wrong. In my code posted below it works fine if I comment out one function as seen in the posting. However if all functions are in the object literal I get this message in FirerBug "missing } after property list [Break on this error] onMenuItem2: function(y){\n." Well whatever is causing the error it's beyond me. So what is it?
    Sincerely
    Marc
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>like Ex</title>
    <style type="text/css" media="screen">
    .fontSize25 *{font-size:25px!important}
    .fontSize26 *{font-size:26px!important}	
    .fontSize27 *{font-size:27px!important}
    .fontSize28 *{font-size:28px!important}	
    .fontSize29 *{font-size:29px!important}
    .fontSize30 *{font-size:30px!important}	
    .fontSize31 *{font-size:31px!important}
    .fontSize32 *{font-size:32px!important}	
    .fontSize33 *{font-size:33px!important}
    .fontSize34 *{font-size:34px!important}	
    .fontSize35 *{font-size:35px!important}
    </style>
    <script type="text/javascript" charset="utf-8">
    var bb = {
        onMenuItem: function(x){
    		var fontSize = "fontSize" + x;
    		document.getElementById('main-window').setAttribute("class", fontSize);		
    	  }
    
    /*
    		onMenuItem2: function(y){
    		var fontSize = "fontSize" + y;	
    		document.getElementById('bookmark-window').setAttribute("class",fontSize);
    		}
    */
    }
    
    </script>
    </head>
    
    <body>
    <a href="#"  onclick="bb.onMenuItem(25)" >future main-window<a><br/>
    <a href="#" onclick="bb.onMenuItem2(35)" >future bookmark-window<a>	
    <div id='main-window'>
    	this is some text to look at<br/>
    	this is some text to look at<br/>
    	this is some text to look at<br/>
    	this is some text to look at
    </div>
    <div id='bookmark-window'>
    	this is some text to look at<br/>
    	this is some text to look at<br/>
    	this is some text to look at<br/>
    	this is some text to look at
    </div>
    </body>
    </html>

  2. #2
    SitePoint Wizard silver trophy kyberfabrikken's Avatar
    Join Date
    Jun 2004
    Location
    Copenhagen, Denmark
    Posts
    6,157
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need a comma after the preceding }

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kyberfabrikken View Post
    You need a comma after the preceding }
    OK- that fixed it thanks. But what was the purpose of the comma?

  4. #4
    SitePoint Wizard silver trophy kyberfabrikken's Avatar
    Join Date
    Jun 2004
    Location
    Copenhagen, Denmark
    Posts
    6,157
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    {} declares an object, also known as a hash or a dictionary or associative array. The following syntax:
    Code:
    var hash = { foo: 11, bar: 22 };
    Is short form of:
    Code:
    var hash = new Object();
    hash.foo = 11;
    hash.foo = 22;
    Functions are variables in Javascript, just like strings and numbers and whatnot. So what you're really doing, is short form of:
    Code:
    var bb = new Object();
    bb.onMenuItem = function(x) {
      var fontSize = "fontSize" + x;
      document.getElementById('main-window').setAttribute("class", fontSize);	
    }
    bb.onMenuItem2 = function(y) {
      var fontSize = "fontSize" + y;	
      document.getElementById('bookmark-window').setAttribute("class",fontSize);
    }
    Just like you need to separate primitive values, when creating an object literal, so do you need to do it, with functions.

    It's peculiar, that Javascript is quite picky about getting the commas correct in this case, when it's otherwise very forgiving with syntactical blunders.

  5. #5
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot!
    I was wondering even though this is a totally different subject in regards to the same code if since you have already looked at my code if you might answer this question. My original code with the comma now works even if I break it down into a separate JavaScript, HTML, and CSS file. However this code was a prelude to investigating how to get a reference and set an attribute at another location. One of my div tags was supposed to be in on HTML file in one location and the other in HTML at another location. With JavaScript linked to the code of one but not both HTML locations. Is this setting an attribute and getting a reference to another location possible. I've heard of the same domain requirement however everything will be in the same domain. Actually I am doing a HTML investigation before hopefully porting this code to Xul.

  6. #6
    SitePoint Wizard silver trophy kyberfabrikken's Avatar
    Join Date
    Jun 2004
    Location
    Copenhagen, Denmark
    Posts
    6,157
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There are some security restrictions, which prevents you from accessing elements of a different window, than the one to which the script belongs. You have some leeway, if you use domain policies, but they are still limited. XUL applications have less restrictions, so you could access several browser windows or even HTML and XUL at the same time.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •