Passing Object Reference as a Parameter

@Vassil_CatsarovApr 01.2010

I have a function that changes the innerHTML of a DIV element.
I want to pass to that function as a parameter a reference to the DIV to be changed.
In the example below it works the first time (executed with the body onLoad event). As the subsequent function declaraton is rewritten by the function itself, it can no longer reference the targeted DIV.
I tried to pass a string teference and use eval(), but this time it fails the third time it is executed. ?

[CODE] <html> <head> <title>Passing Parameters to a Function (with object prameter)</title> <script type=”text/javascript”> function startSlideshow(){ psCreateCtrl(1, 5, document.getElementById(“ps”)); }

function psCreateCtrl(psSelectedImg, psFrameShift, psDiv){ // PARAMETERS: // psSelectedImg – defines which image is to be selected initially // psFrameShift – how many buttons are displayed around the selected image // psDiv – a reference to the DIV that will be assigned the generated code

var psStartPos; //the position of the first image button to be displayed var psEndPos; //the position of the last image button to be displayed

var psCtrl = “”; //holds the generated HTML code

var psDatabase = “one|two|three|four|five|six|seven|eight|nine|ten|so on…|||||||||||||||||||||”.split(“|”);

// defines the start position of the image sequence: psStartPos = psSelectedImg – psFrameShift; if (psStartPos + psFrameShift*2 > psDatabase.length){ //increases the displayed images number to the LEFT of the slected image (reduces psStartPos) psStartPos = psDatabase.length -psFrameShift*2; } if(psStartPos <1){ // start position cannot be < 1 psStartPos=1; }

// defines the start position of the image sequence: psEndPos = psSelectedImg + psFrameShift; if(psEndPos – psStartPos != psFrameShift*2){ //increases the displayed images number to the LEFT of the slected image (increases psEndPos) psEndPos = psStartPos + psFrameShift*2; } if(psEndPos > psDatabase.length){ // end position cannot be > psDatabase.length psEndPos=psDatabase.length; }

//generates the hyperlinks for the clickable image sequence buttons for (i=psStartPos; i<=psEndPos; i++){ //the link buttons if(psSelectedImg != i){ psCtrl += ‘<A title=”Photo ‘ + i + ‘” href=”javascript: psCreateCtrl(‘ + i + ‘, ‘ + 5 + ‘, ‘ + psDiv + ‘);”>’ + i + ‘</A>’; } else { //the selected image red inactive button psCtrl += “<span class=”psSelImg”>” + i + “</span>”; } }

psDiv.innerHTML = psCtrl; }

</script>

<body onLoad=”startSlideshow()”> <div id=”ps”></div> </body> </html>[/CODE]

to post a comment

JavaScript

6 Comments(s) _↴

@toicontienApr 02.2010 — #Grab a reference to the ps DIV inside the psCreateCtrl() function.

@Vassil_CatsarovauthorApr 02.2010 — #Grab a reference to the ps DIV inside the psCreateCtrl() function.[/QUOTE]
Thank you for the suggestion, toicontien! I myself came empirically to this solution - encode the div reference in numbers and pass those numbers as psDiv parameter, ie:

[CODE]
 psCreateCtrl(1, 5, 2);
 
 ....
 
 ....
 
 if (psDiv == 1){
 document.getElementById("ps").innerHTML = psCtrl;
 }
 else if (psDivCode == 2){
 document.getElementById("ps2").innerHTML = psCtrl;
 }
 
 etc...
 
 [/CODE]

[B]But... is there a way the function to take the object parameter and reference to it by itself?[/B]

ie, to make the "object" button work as does the "reference" button in the example below:

[CODE]
 <html>
 
 <head>
 
 <title>Passing objects as a parameter</title>
 <script type="text/javascript">
 var counter = 1;
 
 function changeDiv(newHtml, divObj){
 var container = newHtml + counter + '<br />';
 container += '<input name="button" type="button" onclick="changeDiv('This is a new box # ', document.getElementById('box2'))" value="Reference"/>';
 container += '<input name="button2" type="button" onclick="changeDiv('This is a new box # ', ' + divObj + ')" value="Object"/>';
 divObj.innerHTML = container;
 
 document.getElementById("box1").parentNode.removeChild(document.getElementById("box1").parentNode.lastChild)
 htmlText = document.createTextNode(container);
 document.getElementById("box1").parentNode.appendChild(htmlText);
 
 counter ++;
 }
 
 </script>
 
 </head>
 
 <body>
 
 <div id="box1" style="border: 2px solid #000;">This is box 1<br />
 <input name="button" type="button" onClick="changeDiv('This is a new box # ', document.getElementById('box2'))" value="Click Me"/></div>
 
 <p><div id="box2" style="border: 2px solid #000;"><p>This is box 2</p></div></p>
 <p>HTML code of the second box goes here...</p>
 
 </body>
 
 </html>[/CODE]

@KorApr 02.2010 — #

<i>
 </i>function startSlideshow(object){
 psCreateCtrl(1, 5, object);
 }
 ...
 onload=function(){startSlideshow(document.getElementById('ps'))}

@toicontienApr 02.2010 — #Maybe you're looking for:

[CODE]var counter = 1;
 
 function changeDiv(newHtml, divObj){
 var container = newHtml + counter + '<br />';
 container += '<input name="button" type="button" onclick="changeDiv('This is a new box # ', [B]this.parentNode[/B])" value="Reference"/>';
 divObj.innerHTML = container;
 
  counter ++;
 }[/CODE]

And the onclick attribute would be:

[CODE]<input name="button" type="button" onClick="changeDiv('This is a new box # ', [B]this.parentNode[/B]);" value="Click Me"/>[/CODE]

[B]this.parentNode[/B] is a reference to the DOM node that contains the <input/>, and is always relative to the <input/> generating the click event.

@Vassil_CatsarovauthorApr 02.2010 — #Kor, thank you for you suggestion! I remember I used an anonymous function with setTimeout that contained functions with string parameters. So your method is perhaps similar, though I can't make it work. I have to study further what anonymous functions are and what are their advantages.

toicontien. when I tried your example, it returned the object, instead of its reference. Perhaps I could use DOM to modify the attributes of the dynamically generated html contents...

Though rather impractical for the task in my first example, I show how I managed to escape the object and replace it with its reference:

[CODE]
 
  var thirdParam = 'document.getElementById(&quot;' + psDiv.getAttribute('ID') + '&quot;)';	//psDiv.getAttribute('ID') returns the ID of the object
  psCtrl += '<A title="Photo ' + i + '" href="javascript: psCreateCtrl(' + i + ', ' + 5 + ', ' + thirdParam + ');">' + i + '</A>';
 
 
 [/CODE]

A more practical approach would be not to pass the object, but rather its name as a string value in the place of the third parameter:

psCreateCtrl(1, 5, "ps");

....

psCtrl += '<A title="Photo ' + i + '" href="javascript: psCreateCtrl(' + i + ', ' + 5 + ', '' + psDiv + '');">' + i + '</A>';

...

document.getElementByID(psDiv).innerHTML = psCtrl;

@toicontienApr 07.2010 — #I see what you are trying to do. You want to pass the [B]Id[/B] of the HTML tag. When you said "reference" it made me think of an object reference, in other words, a pointer to an object. "Object reference" and "pointer" are often used interchangeably.

Glad you got it worked out.

Also in #JavaScript _↴

Can anyone tell me, how to find the length of the upload file's content length showing download progress while downloading a file using PHP and jquery Need help from a javascript coder

Success!

Help @Vassil_Catsarov spread the word by sharing this article on Twitter...

Tweet This

Passing Object Reference as a Parameter

6 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Passing Object Reference as a Parameter

6 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #JavaScript _↴