Using onclick() inside another function

Question

function layoutMod() {
    standardId = document.getElementById("standard");
    fancyId = document.getElementById("fancy");
    standardId.onclick = function() {
        standard();
    };

    fancyId.onclick = function() {
        fancy();
    };
};

How can I use the onclick events defined above in a function??? Is it a good practice to load the function at page load?? I need to define in a function the onclick event beacuse I don't want to use global variables.

First of all, always use the var keyword. The way you have it now all your variables are not limited to just this function and are probably global! Use strict mode to help avoid common issues like these. Second, your standardId and fancyId variables seem to be poorly named. getElementById returns a DOM element, not an id — George Mauer
– George Mauer, Commented Feb 28, 2015 at 18:19

bvaughn · Accepted Answer · 2015-02-28 18:06:03Z

3

What you've written should work. However, you should note that by not using the var keyword, you're still creating global variables inside of your function. I would suggest...

function onloadHandler() {
    document.getElementById("standard").onclick = function() {
        // Do something
    };

    document.getElementById("fancy").onclick = function() {
        // Do something else
    };
};

answered Feb 28, 2015 at 18:06

bvaughn

13.5k49 silver badges46 bronze badges

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

6 Comments

Andrei Maieras Over a year ago

How onloadhandler() will be called, only if I call it on onload() ?? that means this function will be called twice, once on onload and once when I click one of two links (document.getElementById("standard") or document.getElementById("fancy"), is that right?

Jared Teng Over a year ago

inside function will not trigger unless you click..., outside function shouldn't trigger twice, try adding a console.log to it to check.

Andrei Maieras Over a year ago

Only if I call it once.. then will trigger

Jared Teng Over a year ago

I believe the trigger inside won't trigger if outside closure function isn't trigger. so yes you would need to trigger it. You can also self trigger it if you don't want it to be triggered by onload handler.

bvaughn Over a year ago

Sorry, you'll need to call the outside function. I thought that was obvious. You can either call it on body onload... <body onload="onloadHandler()"> or you could call it in a <script> tag at the bottom of your page.

|

Ian Hazzard · Accepted Answer · 2015-02-28 18:12:44Z

2

It can get messing when you nest functions inside of each other. In this case, I would suggest removing the outer function so that your code looks like this:

document.getElementById("standard").onclick = function() {
 standard();
};
document.getElementById("fancy").onclick = function() {
 fancy();
};

The code does not need to be in a function, it will automatically be run on page load. Since you don't want global variables, just don't use variables at all.

answered Feb 28, 2015 at 18:12

Ian Hazzard

7,7688 gold badges37 silver badges61 bronze badges

2 Comments

Jared Teng Over a year ago

this would make him use global variables. I think what he did is fine and won't do harm performance wise.

Jared Teng Over a year ago

if you have jquery you can also do, $("#standard").click(function(){})

Collectives™ on Stack Overflow

Using onclick() inside another function

2 Answers 2

6 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related