function return value in javascript

Question

How can I rewrite the below function such that it returns true/false only after one of the buttons is clicked?

function something(param){
  var returnValue = false;

  $('.btn-ok').on('click', function(){
    returnValue = false;
  });

  $('.btn-cancel').on('click', function(){
    returnValue = true;
  })

  return returnValue;
}

The problem currently is return returnValue; executes as soon as this function is called but I want to wait for it to set returnValue based on the button click.

UPDATE:

Apologies. I thought the above explanation of what I'm trying to do would be sufficient.

I am using Bootstrap modal box with jQuery as front end and JSF/Java in the backend. I have an inline click event which looks like this

onclick="if (!changeListner()) return false;"

for a link. This is to override the JSF inline click event. So this has to be there. The changeListener() looks as such

function changeListener(){
    if(formChanged){ //formChanged is a variable that is set to true when an input value changes
            return something(param);        
    } 
    return true;
}

something(param) is actually a dialog box setter that shows different messages based on the parameter. I am trying to pass true to the inline click event if the user chooses to hit "Cancel" or block the click event if the user chooses "Ok".

What are you trying to achieve with this? Looks like a confirm dialog, but is there something happening after clicking ok or cancel? — justinledouxweb, Mar 14 '16 at 19:39
Maybe he doesn't want to use an ugly confirm box, but create his own? — Jim Pedid, Mar 14 '16 at 20:02
it seems that this situation would call for a standard javascript return style without the jquery syntax because jquery is asynchronous and you are specifically looking for a standard function. — Jake Psimos, Mar 14 '16 at 20:09
@JakePsimos that is exactly what the solution that I have posted addresses: you can use the promise API to program it almost as if it was synchronous, but in reality it can be asynchronous. — Jim Pedid, Mar 14 '16 at 20:14

score 1 · Answer 1 · answered Mar 14 '16 at 19:36

1

You should move the buttons outside of your function. If they are inside, you will keep applying the event to your selectors each time it runs.

  $('.btn-ok').on('click', function(){
    something(false)
  });

  $('.btn-cancel').on('click', function(){
    something(true)
  })

function something(value){
  var returnValue = value;

  return returnValue;
}

answered Mar 14 '16 at 19:36

dmgig

4,400
5
36
47

The buttons show up only if `something()` is called. I can't have `something()` called by the buttons. Sorry, but I have update my question for clarity. – zer0 Mar 14 '16 at 21:01
The problem with doing the `$('.btn-ok').on('click',funciton()` each time `something` is called, is you're applying those handlers to the button each time, and they'll fire once for each time they have been attached to the button each time the button is clicked, if I'm not mistaken. – dmgig Mar 14 '16 at 21:03
I want the buttons to just let `something()` know if Ok or Cancel is clicked just once. – zer0 Mar 14 '16 at 21:06

score 1 · Answer 2 · answered Mar 14 '16 at 19:36

You could use callback:

function something(callback){
  var returnValue = false;

  $('.btn-ok').on('click', function(){
    returnValue = false;
    callback(returnValue);
  });

  $('.btn-cancel').on('click', function(){
    returnValue = true;
    callback(returnValue);
  })

  //return returnValue;
}

Usage:

something(function(returnValue){
    console.log("return value called")
})

score 0 · Answer 3 · answered Mar 14 '16 at 19:39

do you mean this?

var returnValue = false;
function something(){
  return returnValue;
}
  $('.btn-ok').on('click', returnValue(){
    returnValue = false;
    something();
  });

  $('.btn-cancel').on('click', function(){
    returnValue = true;
    something();
  })

score 0 · Answer 4 · edited Mar 15 '16 at 19:48

0

try this code

$('.btn-ok').on('click', function(){
    something(false);
});

$('.btn-cancel').on('click', function(){
    something(true);
});

function something(someVal){
    return someVal;
}

edited Mar 15 '16 at 19:48

Matt S

14,976
6
57
76

answered Mar 14 '16 at 19:42

Asad

3,070
7
23
61

Jim Pedid · Answer 5 · 2016-03-14T20:44:28.470

UPDATE: Now with JSFiddle Example. (May not work in IE since Promise isn't included there until Edge.)

https://jsfiddle.net/h91yw778/

You should use a promise API that will resolve when the button is clicked.

Here is an example when using the ES6 promise notation. This function is attaching and removing event handlers using jquery that will be removed when one of the two buttons is clicked. When it is clicked, the promise is resolved with the return value. Since this is a promise, it has a "then" method that the result is passed to as the first argument (which can be consumed using a function.)

function handleButtonsWithPromise() {
    var button1 = $("#button1Id");
    var button2 = $("#button2Id");
    //ES6 Promise API; others exist, including jquery deferred.
    return new Promise( function(resolve, reject) {
        var onButton1Click = function (event) {
            //...;
            resolve(true); //resolves the promise with the value of true;
            button1.off('click', '**', onButton1Click); //clean up event handlers if necessary
            button2.off('click', '**', onButton2Click); //clean up event handlers if necessary
        }; 

        var onButton2Click = function (event) {
            //...;
            resolve(false); //resolves the promise with false;
            button1.off('click', '**', onButton1Click); //clean up event handlers if necessary
            button2.off('click', '**', onButton2Click); //clean up event handlers if necessary
        };

        button1.on('click', onButton1Click);
        button2.on('click', onButton2Click);
    });
}

handleButtonsWithPromise().then(result => {
    console.log(result);
    //...
)

I tried this, but the inline click event that JSF introduces on document render doesn't wait for the function `something()` to return a value unless return false is already defined. So, when I click on a link, I see the modal window for a quick second but it doesn't wait for me to click on the buttons. — zer0, Mar 14 '16 at 22:11
This should work even if you don't return a value from something(). Can you post your code? — Jim Pedid, Mar 15 '16 at 03:20

score 0 · Answer 6 · answered Mar 14 '16 at 20:28

0

I would use same class for both element and another unique class/id name for each one then add this code:

$('.common-class').click(function(){
return $(this).hasClass('unique-1');

})

answered Mar 14 '16 at 20:28

benjah

613
7
29

score 0 · Answer 7 · answered Mar 14 '16 at 20:59

unless you need the function to do something else, you should just use the following:

var returnValue = false; // or true depending on your default value

$('.btn-ok').on('click', function(){
    returnValue = false;
});

$('.btn-cancel').on('click', function(){
    returnValue = true;
});

Then use the variable returnValue when you need it.

function return value in javascript

7 Answers7