Passing variables as parameters from one function to multiple functions

Question

In my script I've got a function createEl() where I declare 2 variables and call 2 other functions passing those declared variables to those 2 functions.

By clicking on one link first function is supposed to add 10px to divp's height. By clicking on another link the second function should deduct 10px from div's height.

It doesn't work as expected though. I believe I have to call those 2 functions from my first functions in some different manner? Now the result is that whichever link I click those 10px are always deducted. Please help.

P.S. I am seeking for an option without global variables, rather just pass the variables as parameters from one function to multiple functions.

HTML:

<a href="" onclick="createEl();return false;">Larger</a>&nbsp;&nbsp;
<a href="" onclick="createEl();return false;">Smaller</a>

<div id='box'></div>

JavaScript:

function createEl() {
    var x = document.getElementById('box');
    var h = x.offsetHeight;

    large(x,h);
    small(x,h);
}

function large(x,h) {
    x.style.height = h + 10 + "px";
}

function small(x,h) {
    x.style.height = h - 10 + "px";
}

Starx · Accepted Answer · 2012-05-15 13:26:06Z

3

Update your HTML to send an identifier parameter to the function call.

<a href="" onclick="createEl('large');return false;">Larger</a>&nbsp;&nbsp;
<a href="" onclick="createEl('small');return false;">Smaller</a>
<div id='box'></div>

JavaScript:

function createEl(funcName){

        var x = document.getElementById('box');
        var h = x.offsetHeight;

        if(funcName =="large") large(x,h); //depending on the parameter call the required function
        else small(x,h);
}

edited May 15, 2012 at 13:26

answered May 15, 2012 at 13:24

Starx

79.3k50 gold badges187 silver badges266 bronze badges

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

1 Comment

jbabey Over a year ago

it may also be worth mentioning that the functions large and small can be declared inside the scope of createEl if they are not called from any other place.

Alexis Pigeon · Accepted Answer · 2012-05-15 13:28:30Z

2

You could pass the offset as a parameter, and create a generic changeHeight(offset) function.

Would this match your requirements?

HTML :

<a href="" onclick="changeHeight(10);return false;">Larger</a>&nbsp;&nbsp;
<a href="" onclick="changeHeight(-10);return false;">Smaller</a>
<div id='box'></div>

JavaScript :

changeHeight(offset) {
    var x = document.getElementById('box');
    x.style.height = (x.offsetHeight + offset) + "px";
}

answered May 15, 2012 at 13:28

Alexis Pigeon

7,52811 gold badges41 silver badges46 bronze badges

Collectives™ on Stack Overflow

Passing variables as parameters from one function to multiple functions

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related