Callback javascript function inside other function

Question

I have two functions:

function changeImage(imgName)
{
image = document.getElementById('imgDisp');
image.src = imgName;
}

function changeSize()
{
document.getElementById('imgDisp').setAttribute("datamask","../files/test/2.png");
}

They are both called with an "onclick" event:

 <img id="imgTemp" onclick="changeImage('../files/templates/blank/<? echo($one['id'])?>.jpg');changeSize();"

What I want is so that changeSize is called again after changeImage is executed. I was advised to use callback but most examples I have seen deal with variable callback inside a function and not with two functions.

Edit: The function change size should put a mask on the image, giving the "datamask" as a parameter to another function in another .js file. The image gets the right "datamask" parameter, but the mask is not applied.

It is actualy called right after changeImage is executed. I don't get what's wrong with this .. :/ — Stphane
– Stphane, Commented Apr 8, 2014 at 8:13
The above code should work, assuming that you actually close the img tag and you change its id to imgDisp. Provide more information about the behaviour you expect and you get. — blgt
– blgt, Commented Apr 8, 2014 at 8:18

Felix · Accepted Answer · 2014-04-08 08:04:57Z

1

You can call changeSize() inside changeImage() instead:

function changeImage(imgName)
{
image = document.getElementById('imgDisp');
image.src = imgName;
changeSize();
}

then you can remove changeSize(); from your onclick function:

<img id="imgTemp" onclick="changeImage('../files/templates/blank/<? echo($one['id'])?>.jpg');" />

answered Apr 8, 2014 at 8:04

Felix

38.2k8 gold badges45 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

vivek_nk · Accepted Answer · 2014-04-08 08:04:50Z

0

function changeImage(imgName)
{
image = document.getElementById('imgDisp');
image.src = imgName;
changeSize();
}

function changeSize()
{
document.getElementById('imgDisp').setAttribute("datamask","../files/test/2.png");
} 


<img id="imgTemp" onclick="changeImage('../files/templates/blank/<? echo($one['id'])?>.jpg');changeSize();"/>

answered Apr 8, 2014 at 8:04

vivek_nk

1,60016 silver badges27 bronze badges

Comments

JackW · Accepted Answer · 2014-04-08 08:05:24Z

0

Just write changeSize() to call the function.

answered Apr 8, 2014 at 8:05

JackW

99911 silver badges22 bronze badges

Comments

Robbie Bardijn · Accepted Answer · 2014-04-08 08:08:09Z

0

This is an example, but I would place the url you echo out in the html attribute in a data attribute. This would be a bit more stable and clean. http://jsbin.com/gijiketi/1/edit?html,js

answered Apr 8, 2014 at 8:08

Robbie Bardijn

4872 silver badges6 bronze badges

Collectives™ on Stack Overflow

Callback javascript function inside other function

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related