Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Don't make functions within a loop. error from JSLint

    I am working on a site and in the process borrowed some js from some one to get dropdown menus to work, but after a while got reports from people who tested my site of some problems and decided to verify all my code, and i have fixed most bugs but the one listed in the title.

    Code:
    sfHover = function() {
    	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    	for (var i=0; i<sfEls.length; i++) {
    		sfEls[i].onmouseover=function() {
    			this.className+=" sfhover";
    		};
    		sfEls[i].onmouseout=function() {
    			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    		};
    	}
    };
    if (window.attachEvent) {window.attachEvent("onload", sfHover);}
    and i am verifying it on jslint

    the error i get is:

    Error:

    Problem at line 6 character 10: Don't make functions within a loop.

    };

    Problem at line 9 character 10: Don't make functions within a loop.

    };

    Implied global: sfHover 1,12, document 2, window 12
    any help will be appreciated, and I'm sure this isn't complex but i don't know much js and want to keep it the same.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,125
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Tell jslint to jump in the lake. That's a perfectly reasonable way of coding what is being done there.

    It *is* true that you don't *need* to make those particular functions in a loop, but there are other similar functions that you would need to do just that way.,

    You should be able to get rid of the other message by just changing
    Code:
    sfHover = function() {
    to
    Code:
    function sfHover() {
    though again I think jslint is just being anally retentive.

    Oh, w.t.h. If you want to move the function-building out of the loop:
    Code:
    function navOver() { this.className += " sfhover"; }
    function navOut() { this.className = this.className.replace(new RegExp(/ sfhover\b/, ""); }
    
    function sfHover() {
    	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    	for (var i=0; i<sfEls.length; i++) {
    		sfEls[i].onmouseover = navOver;
    		sfEls[i].onmouseout = navOut;
    	}
    }
    if (window.attachEvent) {window.attachEvent("onload", sfHover);}
    Just out of curiosity, what do you do if window.attachEvent is *NOT* defined? (i.e., if its MSIE.)
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Regular Coder
    Join Date
    Mar 2006
    Posts
    726
    Thanks
    35
    Thanked 132 Times in 123 Posts
    // You need a better event handler, yours only works in IE.

    Code:
    window.handler= (function(){
    	if(window.addEventListener){
    		return function(who, what, fun, mod){
    			mod= !!mod;
    			who.addEventListener(what, fun, mod);
    		}
    	}
    	else if(window.attachEvent){
    		return function(who, what, fun){
    			who.attachEvent('on'+what, fun);
    		}
    	}
    })()
    // If you set the event to fire when it bubbles up,
    // you only need one event handler for the whole list.

    Code:
    sfHover= function(e){
    	e= window.event? event: e;
    	var t= e.type.toLowerCase()== 'mouseover', 
    	who= e.target || e.srcElement,
    	c= who.className.replace(/ *sfhover */,'');
    	if(who.tagName== 'LI'){
    		if(t) c= c? c+" sfhover": '';
    		this.className= c;
    	}
    }

    Code:
    handler(window,'load', function(){
    	var pa= document.getElementById("nav");
    	handler(pa,'mouseover', sfhover);
    	handler(pa,'mouseout', sfhover);
    });

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,125
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Yeah, nice way, Hoo.

    Do you agree, though, that jslint is being overly picky for no good purpose??
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,237
    Thanks
    12
    Thanked 340 Times in 336 Posts
    Quote Originally Posted by mrhoo View Post
    // You need a better event handler, yours only works in IE.
    that code is the Suckerfish Dropdown fix for IE to allow :hover on elements other than <a> (i.e. <li>). It doesn’t need to run in other browsers.
    Last edited by Dormilich; 08-30-2010 at 02:30 PM.
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #6
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,292
    Thanks
    10
    Thanked 583 Times in 564 Posts
    functions in a loop are the only way to close certain values.
    JSLint is good for corralling noobs to stop writing old-fashioned code styles (c, java, etc) but it has no place in a serious development workflow.

    even crappy web pages validate; doesn't amount to a hill of beans for anyone beside the coder and a supervisor...
    Last edited by rnd me; 08-30-2010 at 09:09 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,125
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Thank you, RndMe, for confirming my assertions.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks guys, and I will be the first to admit i am a noob with web programming, especially when it comes to js. just know that when i have goon to css forums for help there they have asked me to validate the code. but i seem to have it working, so thanks for your help.


  •  

    Tags for this Thread

    Posting Permissions

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