将JavaScript函数作为参数传递给onclick属性

Question

编辑：原来这是一个奇怪的问题，我不知道发生了什么。 这个HTML怎么能

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

使此代码失败？

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

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

更换

奇怪的小提琴

失败http://jsfiddle.net/0zhwxcsL/

作品http://jsfiddle.net/0zhwxcsL/1/

Answer 1

是的Javascript函数只是对象，就像其他任何对象一样，您可以在函数内将函数作为参数传递。 这是非常正常且经常使用的做法。

<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示例

更新的答案

问题是您有一个表单元素ID，该ID与您要调用的函数使用了相同的名称，并且导致页面上的引用冲突。 在表单元素ID的末尾添加ID之类的内容，以消除冲突或将函数名更改为更具描述性的内容，如Replacer。

参考JS小提琴

更详细的答案，这是怎么回事，可以发现这个其他堆栈溢出问题。

Answer 2

之所以refreshContactList是因为您将来自refreshContactList按钮的字符串存储到名为refreshCallback的变量中。 被调用的refreshCallback()函数在幕后制作为refreshContactList() 。 也就是说，这太复杂了！

参考这个小提琴 。 调用addContact()函数，并传递该函数的id 。 然后，调用refreshContactList()函数，并传递id 。 refreshCallBack()函数。