www.webdeveloper.com
Results 1 to 6 of 6

Thread: Assigning the Onclick to the HTML dom using javascript

  1. #1
    Join Date
    Jul 2013
    Posts
    18

    Assigning the Onclick to the HTML dom using javascript

    Hi all,

    I have the following code snippet that i am having some trouble with.

    Code:
    <script>
    
    var holding = document.getElementById("chooseframe"); // Contains outer div element //
    
    var imageholders = [];
    for(var i=0;i<images.length;i++)   // loops through all images in the images array //
    {
    imageholders[i] = document.createElement("IMG");
    imageholders[i].src=images[i];
    imageholders[i].className = "tabs";
    imageholders[i].onclick = function()  {
    	document.slideshow1.src=images[i]; //makes the slideshow image the image of the current IMG being clicked //
    	document.slideshow.src=images[i];  //multilayer slideshow so does the same thing as the above code  //
    	window.clearInterval(pauseme);      // again, clears variables used in the slideshow //
    	window.clearInterval(runfront);
    	window.clearInterval(runback);
    	};
    	
    holding.appendChild(imageholders[i]);  //displays the IMG elements created as children of the first variable //
    }
    
    var nodes = document.getElementById('chooseframe').children; //this part of the code is irrelevant really as all this is doing is sizing the elements depending on how many elements there are in the imageholders array //
    var amount = 100/nodes.length;
    for(w=0;w<nodes.length;w++)
    {
    nodes[w].style.height=amount+"%";
    }
    
    </script>
    The problem here is the
    Code:
    imageholders[i].onclick = function()  {
    	document.slideshow1.src=images[i]; //makes the slideshow image the image of the current IMG being clicked //
    	document.slideshow.src=images[i];  //multilayer slideshow so does the same thing as the above code  //
    	window.clearInterval(pauseme);      // again, clears variables used in the slideshow //
    	window.clearInterval(runfront);
    	window.clearInterval(runback);
    	};
    I assumed at first that the onclick would get the dynamic value of i as everything else does. However, I started to get that the function was not working like that but was instead seeing i when then function was actually being called (so i = 4). I have tried so many ways to fix this, looked up quite a few old posts aswell but cannot seem to figure out a way to fix this for my code.

    Can anyone help to resolve this and if so please explain how the "fixed" code works.

    Thanks to anyone and everyone who helps

    ps: whole code can be seen on my test site here http://englishseadragon.appspot.com/ (please ignore the pictures, :P)

  2. #2
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    780
    Untested, but try this (changes are in red):

    Code:
    <script>
    
    var holding = document.getElementById("chooseframe"); // Contains outer div element //
    
    var imageholders = [];
    
    function imageHolderClick(i)
    {
    	return function()
    	{
    		document.slideshow1.src=images[i]; //makes the slideshow image the image of the current IMG being clicked //
    		document.slideshow.src=images[i];  //multilayer slideshow so does the same thing as the above code  //
    		window.clearInterval(pauseme);      // again, clears variables used in the slideshow //
    		window.clearInterval(runfront);
    		window.clearInterval(runback);
    	};
    }
    for(var i=0;i<images.length;i++)   // loops through all images in the images array //
    {
    imageholders[i] = document.createElement("IMG");
    imageholders[i].src=images[i];
    imageholders[i].className = "tabs";
    imageholders[i].onclick = imageHolderClick(i);
    	
    holding.appendChild(imageholders[i]);  //displays the IMG elements created as children of the first variable //
    }
    
    var nodes = document.getElementById('chooseframe').children; //this part of the code is irrelevant really as all this is doing is sizing the elements depending on how many elements there are in the imageholders array //
    var amount = 100/nodes.length;
    for(w=0;w<nodes.length;w++)
    {
    nodes[w].style.height=amount+"%";
    }
    
    </script>
    JavaScript: Learn | Validate | Compact

  3. #3
    Join Date
    Jul 2013
    Posts
    18
    Hi bionoid,

    I inputted your code and it works perfectly, the only problem now (and, in a way, the biggest problem) is that i don't understand HOW that works. could you or someone else explain the code?

    how i currently see that code:

    • imageHolderClick(i); is called so the value or 1,2,3 or 4 is given to the functions operator (simple stuff)
    • return function(); I have never come across this "return function()" code before today, and for what i have seen this is used to store the value of the "wrapped" function. so it returns the function with the correct i value (in this case) 4 times and the i operator simply makes the images array correct. Assuming i am correct there, the one thing i still dont understand is how the return value is held each time instead of being overwritten by the next returned value and therefore ending up like my code was before (only showing the end loop).

  4. #4
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    780
    Hi, I assume you haven't uploaded the changes to the live site yet. Love the wallpapers BTW.

    When I return a function from within another function, it is called a closure. It basically creates a new scope.
    Because "i" is a Number, it is not passed by reference, so the newly declared "i" within the imageHolderClick function will remain unchanged (unless the members within the closure change it of course). Remember that it is not the same "i" between calls, and therefore do not overwrite each others value.

    We could have done the same thing with an anonymous function call, but it's not really considered good practise to create functions within a loop, even though this is almost the same thing :P

    Some reading if I suck at explaining things: https://developer.mozilla.org/en-US/...Guide/Closures
    Last edited by bionoid; 10-03-2013 at 03:10 PM.
    JavaScript: Learn | Validate | Compact

  5. #5
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,252
    Short explanation : With your script the variable i is unknown when the click event occurs !
    With the closure, BionoÓd build a function for each variable i !

  6. #6
    Join Date
    Jul 2013
    Posts
    18
    I kinda understand, it would be a lie to say i fully understand how closures work even after studying that link quite hard.

    How bionoid's function works however, i understand now so thanks .

    Sadly, I cannot update my site as it is located on a google drive with settings i had on my old computer and im having some problems getting google apps to work on my new one.
    (if this changes i will post back here)

    Thanks guys

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