p2p.wrox.com Forums

p2p.wrox.com Forums (http://p2p.wrox.com/index.php)
-   Javascript How-To (http://p2p.wrox.com/forumdisplay.php?f=87)
-   -   send variable in function to another function (http://p2p.wrox.com/showthread.php?t=54754)

schoolBoy March 1st, 2007 08:29 AM

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


joefawcett March 1st, 2007 08:59 AM

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)

schoolBoy March 1st, 2007 09:20 AM

"
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 )







schoolBoy March 1st, 2007 09:25 AM

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 )




schoolBoy March 1st, 2007 04:05 PM

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 :)


joefawcett March 2nd, 2007 08:24 AM

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)

schoolBoy March 3rd, 2007 09:16 AM

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^^



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

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