无法在Mouseup事件上传递回调函数-JavaScript

Question

I'm trying to pass a callback function as an argument in a previous function that is triggered by a mouseup in a chrome extension. So basically I'm aiming to trigger the quickTranslate function right after the lwsGetText finishes running. But I can't figure out how to do this since the function lwsGetText is triggered by a mouseup. Here's my code:

Content Script (js)

(function () {

    // Holds text being selected in browser
    var lwsSelectedText = '';

    // Adds pop-up to current webpage
    function lwsAddContent(callback) {

        // Get body tag
        var body = document.getElementsByTagName('body');

        // add invisible div
        document.body.innerHTML += '<div id="myModal" class="modal"><div class="modal-content"><span class="close">&times;</span><div id="lwsSpanishDiv"><p id="lwsSpanishTitle">Spanish</p><textarea id="lwsSpanishTextArea">Hello</textarea></div><div id="lwsEnglishDiv"><p id="lwsEnglishTitle">English</p><textarea id="lwsEnglishTextArea">Hello 2</textarea></div></div></div>';

        callback(lwsSetUpTextGetter);

    }

    // Make the pop-up visible and set up close button
    function lwsActivateContent(callback) {

        var modal = document.getElementById('myModal');

        // Get the textarea
        var txtarea = document.getElementById("myTxtArea");

        // Get the <span> element that closes the modal
        var span = document.getElementsByClassName("close")[0];

        span.onclick = function () {
            modal.style.display = "none";
        }

        callback(quickTranslate);

    }

    // Initialize ability to select and grab text from browser
    function lwsSetUpTextGetter(callback) {
        //Set the onmouseup function to lwsGetText
        document.onmouseup = lwsGetText;
        //Handling clicking outside webpage?
        if (!document.all) document.captureEvents(Event.MOUSEUP);


    }

    //Gets selected text
    function lwsGetText(callback,e) {

        // Get access to spanish text area
        var spanishText = document.getElementById('lwsSpanishTextArea');

        //Get text
        lwsSelectedText = (document.all) ? document.selection.createRange().text : document.getSelection();

        //if nothing is selected, do nothing
        if (lwsSelectedText != '') {

            // test: does browser grab text correctly?
            alert(lwsSelectedText);

            // Set spanish text area content to the selected text from browser
            spanishText.value = lwsSelectedText;

            // --Error Here--
            callback();

        }

    }

    function quickTranslate() {

        alert("Quick Translate");

        var url = "https://translate.yandex.net/api/v1.5/tr.json/translate",
        keyAPI = "trnsl.1.1.20130922T110455Z.4a9208e68c61a760.f819c1db302ba637c2bea1befa4db9f784e9fbb8";

        var englishTextArea = document.getElementById('lwsEnglishTextArea');
        var spanishTextArea = document.getElementById('lwsSpanishTextArea');

        englishTextArea.value = 'Working...';

        var xhr = new XMLHttpRequest(),
            textAPI = spanishTextArea.value,
            langAPI = 'en';
        data = "key=" + keyAPI + "&text=" + textAPI + "&lang=" + langAPI;
        xhr.open("POST", url, true);
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr.send(data);
        xhr.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                var res = this.responseText;
                var json = JSON.parse(res);
                if (json.code == 200) {
                    englishTextArea.value = json.text[0];
                }
                else {
                    englishTextArea.value = "Error Code: " + json.code;
                }
            }
        }

    }


    // When document ready
    $(document).ready(function () {

        lwsAddContent(lwsActivateContent);

    });

})();

If someone could help me figure out how to implement the quickTranslate function as a callback function, that would be awesome! Thanks!

Answer 1

As you know the event handler you're assigning takes one parameter, the event. However you can create a closure around the "callback" variable by doing something like:

function lwsGetText(callback) {
  return function (e) {

    // Get access to spanish text area
    var spanishText = document.getElementById('lwsSpanishTextArea');

    //Get text
    lwsSelectedText = (document.all) ? document.selection.createRange().text : document.getSelection();

    //if nothing is selected, do nothing
    if (lwsSelectedText != '') {

        // test: does browser grab text correctly?
        alert(lwsSelectedText);

        // Set spanish text area content to the selected text from browser
        spanishText.value = lwsSelectedText;

        // --Error Here--
        callback();

    }
  };
}

You would then pass the value quickTranslate as the "callback" parameter when you set the handler, not sure how you're doing that so here is a guess:

myElement.addEventListener("mouseup", lwsGetText(quickTranslate));