Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript How-To
Password Reminder
Register
Register | FAQ | Members List | Calendar | 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 tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developersí questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Display Modes
  #1 (permalink)  
Old March 1st, 2007, 07: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

Reply With Quote
  #2 (permalink)  
Old March 1st, 2007, 07: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)
Reply With Quote
  #3 (permalink)  
Old March 1st, 2007, 08: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 )






Reply With Quote
  #4 (permalink)  
Old March 1st, 2007, 08: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 )



Reply With Quote
  #5 (permalink)  
Old March 1st, 2007, 03: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 :)

Reply With Quote
  #6 (permalink)  
Old March 2nd, 2007, 07: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)
Reply With Quote
  #7 (permalink)  
Old March 3rd, 2007, 08: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^^

Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off

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 02: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 01:32 PM
pass variable into function and retaining value mikeuk Beginning PHP 3 August 4th, 2004 06:47 AM



All times are GMT -4. The time now is 04:52 AM.


Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.