#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Posts
    21
    Rep Power
    0

    Pass an array to a function?


    I'm thinking about a script that passes data from a .html to a seperate .js file. The intention is to list the images in a gallery on that page, so I can have right/left button to scroll them. Examples I have found to pass an array to a function don't seem to help this example, so can anyone tell me the best way to handle this? Would it be a small javascript function on the page which calls another one(can you even call a function from a different .js file?) or can I pass the data in an array in the onload event(the number of pictures would vary).
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2009
    Location
    Jakarta, Indonesia.
    Posts
    218
    Rep Power
    32
    Please share your thoughts: what have you got so far?
  4. #3
  5. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2009
    Posts
    335
    Rep Power
    247
    A browser doesn't pass data from a HTML file to a JS file.

    In the head (or body) you load the JS, this is now memory resident and any funciton within the JS code can be called, passed data etc. at any time (onclick of a button for example or mouse over)

    also the entire HTML is stored in the DOM, which is accesible via the JS.

    Having them in separate files is just a way of separating code, like you do with CSS (content / design separation), putting JS in a separate file is just ensuring 'function' is separate from content and design. Code separation is a good thing!

    However, if you are talking about keeping data from one page to the next, then this needs to be stored either in a cookie (be aware of EU cookie legislation if in EU?) or query string or other method as each time you navigate to a webpage the old page is detroyed and only the conent of the current page is available.

    Hope that helps.

    If you have some actual JS you need a help with, as 'hdewantara' say's - you need to share with us :-)
    Free MP3 Dance Music Downloads

    To err is human; To really balls things up you need Microsoft!
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Posts
    21
    Rep Power
    0
    Okay...I was more asking for the best way to do this so I could research and then do the code, but...okay.

    So I want a seperate .js file....

    Code:
    <script type="text/javascript" src="pics.js"></script>
    In that file...

    Code:
    var piclist=new Array();
    
    function hidepic() {
    	document.getElementById("imgdiv").style.visibility = "hidden";
    	document.getElementById("imgcontdiv").style.visibility = "hidden";
    	document.getElementById("mainpic").src = "images/trans.png";
    }
    
    function showpic(pic,title,desc) {
    	document.getElementById('galtitle').innerHTML = title;
    	document.getElementById('galdesc').innerHTML = desc;
    	document.getElementById('mainpic').src = pic;
    	document.getElementById('imgcontdiv').style.visibility = "visible";
    	document.getElementById('imgdiv').style.visibility = "visible";
    }
    
    function setpic(prevnext) {
    	if(updown=="prev") {
    		// Set mainpic to pic-1
    	} else {
    		// Set mainpic to pic+1
    	}
    }
    
    function getpics(listofpics) {
    	piclist = listofpics;
    }
    Okay, so I got a little lost at the end, but am new to this. I would need to declare a global variable which is set in showpic to whatever pic is selected. That aside....

    Code:
    <body OnLoad="getpics(['pic1.jpg','pic2.jpg','pic3.jpg'])">
    Would something like this work, or would I be way off target? Could I declare the array in onload and then pass it to getpics? Is there a much easier way to do this and keep the changes in the .html file?

    I hope this makes it clearer.
  8. #5
  9. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2009
    Posts
    335
    Rep Power
    247
    You could do it this way. Have your main functions in the JS file and the global var 'piclist' and then have the <head> create the array.
    Code:
    <head>
    <script type="text/javascript">
    function getpics() {
    	piclist = new Array('pic1.jpg','pic2.jpg','pic3.jpg');
    }
    </script>
    </head>
    <body onload="getpics();">
    But your way should work!

    I tested with this and it's fine

    Code:
    <html>
    <head>
    <script type="text/javascript">
    function myFunc(arr){
        alert('pos 2 = ' + arr[2]);
    }
    </script>
    </head>
    <body onload="myFunc(['pic1.jpg','pic2.jpg','pic3.jpg']);">
    </body>
    </html>
    Free MP3 Dance Music Downloads

    To err is human; To really balls things up you need Microsoft!
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Posts
    21
    Rep Power
    0
    Okay, good to know my thinking was fine. Am I also able to do a function call to another script? For example, can I have a .js linked with a function called "funcA(data)" and in a short script which is in the head of the html, call funcA and have Javascript understand the function is in another source? I hope that makes sense
  12. #7
  13. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2009
    Posts
    335
    Rep Power
    247
    you just need to include in your head links to each script, and not call a function untill they are loaded.

    Code:
    <script type="text/javascript" src="myScript1.js"></script>
    <script type="text/javascript" src="myScript2.js"></script>
    <script type="text/javascript" src="myScript3.js"></script>
    <script type="text/javascript" src="myScript4.js"></script>
    <script type="text/javascript" src="myScript5.js"></script>
    As far as the page / DOM / browser is concerned, all functions in all those external JS are loaded into memory and are available to be called.

    Regardless of where they are called from

    so one script can call a function in another, multiple buttons on the page which have click events could call a function in each of the script.. etc..

    think of it like this.... loading 5 scripts in separate files in the head as I have shown is no different than you having one script with all the functions from each in the one file!

    The same way CSS works, you can have it all in one file or load several CSS files, just be clear on precidence with CSS and look at using the Javascript JQuery framework, which has good handlers for 'document ready', plus it makes coding easier with its shorthand notation and in-built functionality.

    You can even dynamically load JS by simply changing the source of the script tag...

    Code:
    <script id="myScript" src="mysource1.js" type="text/javascript"></script>
    Then in some function you could do..

    Code:
    document.getElementById('myScript').src = 'mysource2.js';
    This now loads the code into memory from the second script and still leaves the functions from the original script in memory!

    hope it helps!
    Last edited by 1DMF; July 26th, 2012 at 12:35 PM.
    Free MP3 Dance Music Downloads

    To err is human; To really balls things up you need Microsoft!

IMN logo majestic logo threadwatch logo seochat tools logo