Pass a JavaScript function as parameter within an onclick attribute

Question

EDIT: This turned out to be an odd problem that I have no idea what is going on. How can this HTML

            <div class="col-lg-6">
                Find:
                <textarea id="replace" rows="5" cols="1">to replace</textarea>
            </div>

Make this code fail?

    <script type="text/javascript">
        function go(transform_function) {
            alert('go');
            transform_function('test');
        }

        function replace(output) {
            alert('rep');
        }
    </script>

Replace

Fiddles of the oddness

Fails http://jsfiddle.net/0zhwxcsL/

Works http://jsfiddle.net/0zhwxcsL/1/

This works: jsfiddle.net/k90t1128 (provided the JS is in the head/before that onclick in the body) — Adam Jenkins
– Adam Jenkins, Commented Aug 26, 2015 at 16:54
Why not just call that function in addContact? You can pass id as a parameter to the addContact which you will then pass to refreshContactList — AdityaParab
– AdityaParab, Commented Aug 26, 2015 at 16:55
Did you try this before asking? Always try your code before asking. — Patrick87
– Patrick87, Commented Aug 26, 2015 at 16:56
son of a... I named my function go, I was using sample code, to make a clearer question — Serhiy
– Serhiy, Commented Aug 26, 2015 at 16:57

Community · Accepted Answer · 2017-05-23 12:22:04Z

2

Yes Javascript Functions are just objects and like any other object you can pass a function as a parameter within a function. This is a very normal and heavily used practice.

<button onclick="addContact('1', refreshContactList);">Go</button>

<script type="text/javascript">
  function addContact(id, callback) {
    console.log(id);
    callback();
    // You can also pass arguments if you need to
    // refreshCallback(id);
  };

  function refreshContactList() {
    console.log('Callback Achieved');
  };
</script>

JSFiddle Example

Updated Answer

The problem is you have a form element id using the same name as the function you want to call and it's causing a reference conflict on the page. Add something like ID to the end of your form element ids to remove the conflict or change your function name into something more descriptive like replacer.

Reference JS Fiddle

A more detailed answer to what is going on can be found at this other stack overflow question.

edited May 23, 2017 at 12:22

CommunityBot

11 silver badge

answered Aug 26, 2015 at 17:06

MrCrowly

1682 silver badges13 bronze badges

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

3 Comments

Serhiy Over a year ago

thank you for the answer, my problem turned out to be something quite different, I've edited the question to reflect the real problem

Serhiy Over a year ago

Thank you so much for the detailed update and pointing me to the other question. I was wondering what the issue was.

MrCrowly Over a year ago

No problem, we've all been there.. Hence why stackoverflow is so awesome.

Nathaniel Ford · Accepted Answer · 2015-08-26 17:22:49Z

0

This works because you are storing the string from the refreshContactList button into a variable named refreshCallback. The refreshCallback() function that is being called is made behind the scenes to refreshContactList(). That said, this is too complicated!

Refer to this fiddle. Call the addContact() function, passing the id from that function. Then call the refreshContactList() function, passing the id. The refreshCallBack() function isn't needed.

edited Aug 26, 2015 at 17:22

Nathaniel Ford

21.3k20 gold badges98 silver badges112 bronze badges

answered Aug 26, 2015 at 17:06

Max Pringle

373 bronze badges

1 Comment

Serhiy Over a year ago

thank you for the answer, my problem turned out to be something quite different, I've edited the question to reflect the real problem

Collectives™ on Stack Overflow

Pass a JavaScript function as parameter within an onclick attribute

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related