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/

working fine, what´s the question? http://jsfiddle.net/jqvsf2c3/ — juvian, Aug 26 '15 at 16:54
This works: http://jsfiddle.net/k90t1128/ (provided the JS is in the head/before that onclick in the body) — Adam Jenkins, Aug 26 '15 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, Aug 26 '15 at 16:55
Did you try this before asking? Always try your code before asking. — Patrick87, Aug 26 '15 at 16:56
son of a... I named my function go, I was using sample code, to make a clearer question — Serhiy, Aug 26 '15 at 16:57
I guess one cannot make function go() and have this work? Should I just delete this question? — Serhiy, Aug 26 '15 at 16:58
This is where I failed... Updated question, but not sure whether it's worth keeping around. http://jsfiddle.net/k90t1128/1/ — Serhiy, Aug 26 '15 at 17:00
@Maverick: because then you can have a second link: ``, without changing `addContact`. — Scott Sauyet, Aug 26 '15 at 17:06
Ok, so I have no idea what is going on here, can anyone explain it, I've finally isolated the problem to two separate fiddles, and I don't understand why HTML is impacting the whole situation. Sorry that the sample I tried to provide earlier wasn't a clear representation of my problem. Fails http://jsfiddle.net/0zhwxcsL/ Works http://jsfiddle.net/0zhwxcsL/1/ — Serhiy, Aug 26 '15 at 17:28

score 2 · Accepted Answer · edited May 23 '17 at 12:22

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.

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, Aug 26 '15 at 17:55
Thank you so much for the detailed update and pointing me to the other question. I was wondering what the issue was. — Serhiy, Aug 27 '15 at 09:46
No problem, we've all been there.. Hence why stackoverflow is so awesome. — MrCrowly, Aug 27 '15 at 17:01

score 0 · Answer 2 · edited Aug 26 '15 at 17:22

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 '15 at 17:22

Nathaniel Ford

20,545
20
91
102

answered Aug 26 '15 at 17:06

Max Pringle

39
3

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 Aug 26 '15 at 17:55

Pass a JavaScript function as parameter within an onclick attribute

2 Answers2