將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()函數。