Javascript - call variable from function

Question

I have this radio button, if checked i want it to display 2 alerts showing ( item="shoes" ) one from local and the other from global , the fact that the alert shows only one means that the variable is still empty on the global.

/*Empty item*/
var item = '';

/*Function selection item*/
function selection(select) {
  var item = select;
  alert(item);
}

/*If radio button selected item='shoes'*/
$('input[name="selection"]').click(function() {
  if ($(this).is(':checked')) {
    selection('shoes');
  }
});

/*Alert on item if not empty*/
if (item !== '') {
  alert(item); /*NOT WORKING*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<input type="radio" name="selection" id="shoes" value="shoes">Shoes<br>

How to transfer a variable from local to global scope ? please don't mark me as a dulicate only if you're sure that another subject will solve my problem. Thanks

@CalvinNunes it needs to show 2 times, one on local, the other on global, i'll edit my question — alioua walid
– alioua walid, Commented Sep 27, 2018 at 13:43
Of course it won't show two times, the first time you try to show it, it will always be empty, it only get some value when you click on the radio. — Calvin Nunes
– Calvin Nunes, Commented Sep 27, 2018 at 13:46
The item in function selection and the global one are two differnt variables, because of the var in front of var item = select. But even if you remove the var the second alert would not be called, becaue the if will be evaluated before the click happens. — t.niese
– t.niese, Commented Sep 27, 2018 at 13:46

Scott Sauyet · Accepted Answer · 2018-09-27 13:49:59Z

While this will fix your problem, I'd urge you to consider looking at an approach that does not involve global state like that.

There were two problems. First, you were re-declaring your item variable inside the function, so you had a local copy that you changed, rather than the global one. Second, you were not checking for empty inside the change listener, but only when you started.

Better indentation might have made this clear.

/*Empty item*/
var item= ''; 

/*Function selection item*/
function selection(select){
    item = select;
    alert(item);
}

/*If radio button selected item='shoes'*/
$('input[name="selection"]').click(function(){
     if ($(this).is(':checked')){
         selection('shoes');
     }	
     /*Alert on item if not empty*/
     if (item!==''){
         alert(item); /*WORKING NOW THAT IT'S IN THE RIGHT PLACE*/
     }           
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
<input type="radio" name="selection" id="shoes" value="shoes">Shoes<br>

jawahar N · Accepted Answer · 2018-09-27 13:56:52Z

First of all, the javascript was run on the page load. So, you have set var item = ''; empty value in item variable and below you have checked

if (item != '') {
      alert(item); /*NOT WORKING*/
    }

this code. On the page load all script will executed including below code also,

if (item != '') {
      alert(item); /*NOT WORKING*/
    }

So, the above code was not run after checking the radio button.

But, we can able to do like below, Please take it.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<input type="radio" name="selection" id="shoes" value="shoes">Shoes<br>

<script type="text/javascript">
    /*Empty item*/
    var item = '';

    /*Function selection item*/
    function selection(select) {
      item = select;
      alert(item);
      sample();
    }

    function sample() {
        alert(item);
    }

    /*If radio button selected item='shoes'*/
    $('input[name="selection"]').click(function() {
      if ($(this).is(':checked')) {
        selection('shoes');
      }
    });
</script>

Mamun · Accepted Answer · 2018-09-27 13:51:10Z

0

You should have the alert inside the click handler function. Also do not re-declare the variable item inside the function which will create a totally new variable scoped to the function:

/*Empty item*/
var item= ''; 
/*Function selection item*/
function selection(select){
  item = select;
  alert(item);
}
/*If radio button selected item='shoes'*/
$('input[name="selection"]').click(function(){
  if ($(this).is(':checked')){         
    selection('shoes');            
  }	
  /*Alert on item if not empty*/
  if(item!==''){
    alert(item); /*NOT WORKING*/
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  


<input type="radio" name="selection" id="shoes" value="shoes">Shoes<br>

edited Sep 27, 2018 at 13:51

answered Sep 27, 2018 at 13:48

Mamun

69k9 gold badges51 silver badges62 bronze badges

1 Comment

t.niese Over a year ago

This would not work, because the variable item in selection is different to the one in the click callback.

Nick_85 · Accepted Answer · 2018-09-27 13:56:07Z

0

Use return if you want to "transfer a variable from local to global scope ".

var item = '';
function selection(select) {
    var item = select;
    alert(item);
    return item; //<========
}
$('input[name="selection"]').click(function() {
    if ($(this).is(':checked')) {
    item = selection('shoes'); //<========
    }
});

if (item !== '') {
    alert(item); 
}

answered Sep 27, 2018 at 13:56

Nick_85

865 bronze badges

Comments

MattOpen · Accepted Answer · 2018-09-27 14:00:15Z

0

You have declared the variable twice

var item= '';

and also in your function. So change your function to

function selection(select) {
  item = select;
  alert(item);
  if (item !== '') {
    alert(item); /*NOT WORKING*/
  }

}

the 2nd issue was, the alert will never reach after click event. So moved it into the the function

here is the fiddle: https://jsfiddle.net/1x8pbd3L/

edited Sep 27, 2018 at 14:00

answered Sep 27, 2018 at 13:45

MattOpen

8241 gold badge12 silver badges28 bronze badges

1 Comment

Calvin Nunes Over a year ago

it doesn't change the fact that the alert will still show up only once

Collectives™ on Stack Overflow

Javascript - call variable from function

5 Answers 5

Comments

Comments

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related