www.webdeveloper.com
Results 1 to 4 of 4

Thread: variable not being passed in onload

  1. #1
    Join Date
    Jan 2004
    Posts
    484

    variable not being passed in onload

    Why is the variable not being passed or set
    only the last variable in the array is being passed

    the "tg" dosn't pass

    Code:
    // JavaScript Document
    // this function hides the multiple office
    // and sets an on click handler 
    
    	var runCol ={
    		counterId:'',
    		target:'',
    		maxPos:400,
    		minPos:18,
    		pos:18,
    		run:function(mo){
    			runCol.target = mo
    			var mil = document.getElementById(runCol.target);	
    			clearInterval(runCol.counterId);
    			if(mil.className=='multiple_offices_off'){
    				runCol.counterId = setInterval('runCol.expand()',10);
    			}else{
    				runCol.counterId = setInterval('runCol.contract()',10);				
    			}			
    				
    			
    		},
    		expand:function(){
    			var mil = document.getElementById(runCol.target);
    				runCol.pos = runCol.pos + (.07 * runCol.pos);
    				if(runCol.pos < runCol.maxPos ){
    					mil.style.height = runCol.pos+"px";
    				}else{
    				    runCol.pos = runCol.maxPos;
    					mil.className = 'multiple_offices_on';
    					clearInterval(runCol.counterId);
    				}
    		},
    		contract:function(){
    			var mil = document.getElementById(runCol.target);
    				runCol.pos = runCol.pos - (.07 * runCol.pos);
    				if(runCol.pos > runCol.minPos ){
    					mil.style.height = runCol.pos+"px";
    				}else{
    				    runCol.pos = runCol.minPos;
    					mil.className = 'multiple_offices_off';
    					clearInterval(runCol.counterId);
    				}
    		}
    	}
    	
    	window.onload = function(){
    	//this sets the click handler for a multiple 
    	    var moArr = ['mo_controller','mo_controller1','mo_controller2','mo_controller3','mo_controller4'];
    		var targetArr = ['multiple_offices','multiple_offices1','multiple_offices2','multiple_offices3','multiple_offices4'];
    		for(i=0;i<moArr.length;i++){
    			var mo = document.getElementById(moArr[i]);
    			var tg = targetArr[i];
    			mo.onclick = function(){
    				runCol.run(tg);	
    			}
    			mo.onmouseover = function(){
    				this.style.cursor = 'pointer';		
    			}
    		}
    	}

    here is the html

    Code:
          <div class="div_hr">&nbsp;</div>
            <div id="multiple_offices" class="multiple_offices_off" >
            	<div id="mo_controller" class="hdr"><font>MULTIPLE OFFICES</font> <font class="alert">(click to add multiple offices)</font></div>
                <div class="des_txt">To list Multiple office locations, please fill out the following information:</div>
                <span><div class="txt_hdl">Practice/Group Name</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span> 
                <span><div class="txt_hdl">Preferred FAD display name</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
                <span><div class="txt_hdl">Street Address</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
                <span><div class="txt_hdl">Unit/Suite</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
                <span><div class="txt_hdl">City</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
                <span><div class="txt_hdl">State</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
                <span><div class="txt_hdl">Zip Code</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
                <span><div class="txt_hdl">Telephone #</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
                <span><div class="txt_hdl">Fax #</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
                <span><div class="txt_hdl">Website</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
                <span><div class="txt_hdl">E-mail address</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
                 <span><div class="txt_hdl">Office hours</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" style="width:40px;" /> to <input type="text" name="" class="inpt_gen" style="width:40px;" /></div></span>
                <div class="btm_txt" style="clear:both">
                Please contact customer service at 1-800-XXX-XXXX if you need to update any of this information.
                </div>
          	</div>
          
          
          
          
            <div class="div_hr">&nbsp;</div>
            <div id="multiple_offices1" class="multiple_offices_off" >
            	<div id="mo_controller1" class="hdr"><font>MULTIPLE OFFICES</font> <font class="alert">(click to add multiple offices)</font></div>
                <div class="des_txt">To list Multiple office locations, please fill out the following information:</div>
                <span><div class="txt_hdl">Practice/Group Name</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span> 
                <span><div class="txt_hdl">Preferred FAD display name</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
                <span><div class="txt_hdl">Street Address</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
                <span><div class="txt_hdl">Unit/Suite</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
                <span><div class="txt_hdl">City</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
                <span><div class="txt_hdl">State</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
                <span><div class="txt_hdl">Zip Code</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
                <span><div class="txt_hdl">Telephone #</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
                <span><div class="txt_hdl">Fax #</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
                <span><div class="txt_hdl">Website</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
                <span><div class="txt_hdl">E-mail address</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
                 <span><div class="txt_hdl">Office hours</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" style="width:40px;" /> to <input type="text" name="" class="inpt_gen" style="width:40px;" /></div></span>
                <div class="btm_txt" style="clear:both">
                Please contact customer service at 1-800-XXX-XXXX if you need to update any of this information.
                </div>
          	</div>
            
            <div class="div_hr">&nbsp;</div>
            <div id="multiple_offices2" class="multiple_offices_off" >
            	<div id="mo_controller2" class="hdr"><font>MULTIPLE OFFICES</font> <font class="alert">(click to add multiple offices)</font></div>
                <div class="des_txt">To list Multiple office locations, please fill out the following information:</div>
                <span><div class="txt_hdl">Practice/Group Name</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span> 
                <span><div class="txt_hdl">Preferred FAD display name</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
                <span><div class="txt_hdl">Street Address</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
                <span><div class="txt_hdl">Unit/Suite</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
                <span><div class="txt_hdl">City</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
                <span><div class="txt_hdl">State</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
                <span><div class="txt_hdl">Zip Code</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
                <span><div class="txt_hdl">Telephone #</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
                <span><div class="txt_hdl">Fax #</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
                <span><div class="txt_hdl">Website</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
                <span><div class="txt_hdl">E-mail address</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
                 <span><div class="txt_hdl">Office hours</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" style="width:40px;" /> to <input type="text" name="" class="inpt_gen" style="width:40px;" /></div></span>
                <div class="btm_txt" style="clear:both">
                Please contact customer service at 1-800-XXX-XXXX if you need to update any of this information.
                </div>
          	</div>
    here is the css

    Code:
    #multiple_offices{padding:10px;text-align:left;}
    #multiple_offices1{padding:10px;text-align:left;}
    #multiple_offices2{padding:10px;text-align:left;}
    #multiple_offices3{padding:10px;text-align:left;}
    #multiple_offices4{padding:10px;text-align:left;}
    	
    #multiple_offices span{display:block;padding:3px;clear:both;}
    #multiple_offices1 span{display:block;padding:3px;clear:both;}
    #multiple_offices2 span{display:block;padding:3px;clear:both;}
    #multiple_offices3 span{display:block;padding:3px;clear:both;}
    #multiple_offices4 span{display:block;padding:3px;clear:both;}
    	
    
    
    
    .multiple_offices_off{
    	height:18px;
    	overflow:hidden;
    }
    .multiple_offices_on{
    	height:400px;
    	overflow:hidden;
    	/*overflow:visible;
    	display:block;*/
    }
    Last edited by Natdrip; 03-19-2009 at 01:08 PM.

  2. #2
    Join Date
    Nov 2002
    Posts
    4,473
    A VAR declared inside a FUNCTION block is a local variable visible only to the function where it is declared. It does not exist anywhere else, and once the function finishes, it is destroyed.

    "Variable go down the hole - flush!"

  3. #3
    Join Date
    May 2006
    Location
    Odenton, MD
    Posts
    1,449
    A VAR declared inside a FUNCTION block is a local variable visible only to the function where it is declared.
    that is entirely true. however, there still a way to access local variable, closure. actually, that is what Natdrip code does but it always refer to the last element because every closure refer to the same variable. what you need is to retain the value on an unique closure for each event. you can do that with a function that return another function:
    Code:
    mo.onclick = function(val){
    return function(){runCol.run(val);	}
    }(tg);
    closure and infamous loop
    Last edited by ZeroKilled; 03-19-2009 at 01:45 PM.

  4. #4
    Join Date
    Jan 2004
    Posts
    484
    That is an awsome answer ZeroKilled you are ROXer

    Thanx

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles