Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript How-To
| Search | Today's Posts | Mark Forums Read
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
  #1 (permalink)  
Old March 1st, 2007, 08:29 AM
Authorized User
 
Join Date: Mar 2007
Location: , , .
Posts: 11
Thanks: 0
Thanked 0 Times in 0 Posts
Default send variable in function to another function

Hi people,
I have to make a assignment for school.
I have to make the same as on this website http://www.airtightinteractive.com/p...iewer/example/

only then in JavaScript ( cause the example website did it in flash )
So I have the folowing code:
function showPictures()
    {
        for(var i = 0; i < album.length; i++)
        {
            var mijnImg = document.createElement("img")
            mijnImg.setAttribute("src", album[i].url)
            mijnImg.setAttribute('width','200px');
                       mijnImg.setAttribute('height','200px');
        mijnImg.setAttribute("onClick", "vergrootImg()");
            mijnImg.style.margin = '40px'
            mijnImg.setAttribute('border', 5);
            mijnImg.style.borderColor = 'white'
    document.getElementById("fotoalbum").appendChild(m ijnImg)
        }
    }

and the function:
        function vergrootImg()
    {
        mijnImg.setAttribute('width','400px');
        mijnImg.setAttribute('height','400px');
    }

My question is about the onClick thats defined in the showPictures() function.
It sais that when a picture is clicked it should change the width and height defined in the " vergrootImg() " function.

But it doesnt work.
I think the vergrootImg function doesnt know what " mijnImg " is
cause he variable is only local in the other function ?

so how do I sent this variable to the other function

thnx for reading my question,
Martin

  #2 (permalink)  
Old March 1st, 2007, 08:59 AM
joefawcett's Avatar
Wrox Author
Points: 9,763, Level: 42
Points: 9,763, Level: 42 Points: 9,763, Level: 42 Points: 9,763, Level: 42
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Exeter, , United Kingdom.
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
Default

I would try putting an alert at the start of vergrootImg to make sure it is called at all, or use a debugger if possible. I have found setting onclick with setAttribute doesn't work, I usually just use the onclick property.

For the second part of the problem there are a number of ways, one being to pass "this" a reference to the image:
Code:
img.onclick = function(){vergrootImg(this);};
then modify vergrootImg:
Code:
function vergrootImg(img)
{
  img.setAttribute('width','400px');
  img.setAttribute('height','400px');
}
--

Joe (Microsoft MVP - XML)
  #3 (permalink)  
Old March 1st, 2007, 09:20 AM
Authorized User
 
Join Date: Mar 2007
Location: , , .
Posts: 11
Thanks: 0
Thanked 0 Times in 0 Posts
Default

"
img.onclick = function(){vergrootImg(this);};

then modify vergrootImg:

function vergrootImg(img)
{
  img.setAttribute('width','400px');
  img.setAttribute('height','400px');
}
"

I tried that but it didnt work, it only showed one picture instead of 25 and I coulnt click on it, but then I changed it a bit:

instead of " img.onclick = function(){vergrootImg(this);}; "
I still use the setAttribute:
mijnImg.setAttribute("onClick", "vergrootImg(this)");

and that works just fine so thank you very much^^

( well it works in FireFox not in IE6.0 but I can always ask that my teacher, there are more stuff that doesnt work in IE so XD )






  #4 (permalink)  
Old March 1st, 2007, 09:25 AM
Authorized User
 
Join Date: Mar 2007
Location: , , .
Posts: 11
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Just one quick other question

can I make the picture small again by clicking a second time on it

I cant find a function for that

( cause onClick is on click and it doesnt count )



  #5 (permalink)  
Old March 1st, 2007, 04:05 PM
Authorized User
 
Join Date: Mar 2007
Location: , , .
Posts: 11
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Ok I couldnt find a function for the second time I would use onClick.
So I made a new function with a Boolean:

function clickImg(img)
    {
        var geklikt = false

        if(geklikt == false)
        {
        img.setAttribute('width','400px');
        img.setAttribute('height','400px');
        geklikt = true
        //alert("hooi")
                break;
        }

        if(geklikt)
        {
        img.setAttribute('width','200px');
          img.setAttribute('height','200px');
        geklikt = false
        }
    }

The problem is that he excecutes the whole code. So he makes the picture large and small again so quick you dont even see it ( you can see it when I use the alert ).

So I thought I should use a break at the point where the alert is now. But that doesnt work.

Can it be that " var geklikt = false " means that the var gets false everytime the function starts ?

I guess you know what i'm trying to create but i'm really new into this and I cant get it working so if you know a solution please help.

Thnx for reading again :)

  #6 (permalink)  
Old March 2nd, 2007, 08:24 AM
joefawcett's Avatar
Wrox Author
Points: 9,763, Level: 42
Points: 9,763, Level: 42 Points: 9,763, Level: 42 Points: 9,763, Level: 42
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Exeter, , United Kingdom.
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
Default

Again there are a number of possibilities, you can declare the variable outside the function:
Code:
var geklikt = false;
function clickImg()
{
  if (geklikt)
  {
    //make smaller
  }
  else
  {
    //make bigger
  }
  geklikt = !geklikt;
}
Alternatively test the image width to see if it needs expanding or reducing.
You should try to name your variables and functions more descriptively. Rather than "clicked" perhaps use "isExpanded", in Dutch of course :)

--

Joe (Microsoft MVP - XML)
  #7 (permalink)  
Old March 3rd, 2007, 09:16 AM
Authorized User
 
Join Date: Mar 2007
Location: , , .
Posts: 11
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Yeah cool it works^^
for some stupid reason I thought the variable would be made only once, but it resets the value to false everytime it enters the loop :)

Learning a bit everyday^^



Similar Threads
Thread Thread Starter Forum Replies Last Post
auto tracker function &send personalised email miracles Excel VBA 1 April 27th, 2007 04:43 AM
passing variable to function Boszky Pro PHP 2 December 15th, 2005 03:01 AM
passing variable to function in innerHTML crmpicco Javascript How-To 5 October 19th, 2005 10:25 AM
Passing a variable into the id() function EstherMStrom XSLT 5 January 19th, 2005 02:32 PM
pass variable into function and retaining value mikeuk Beginning PHP 3 August 4th, 2004 06:47 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.