How to pass value between functions?

Question

i'm creating a very simple Santa's game for my friends. So the logic is again very simple. Given a list of names, user need to insert his/her name and whenever the button is clicked, a random name will pick up from the list and display as result.

I have two small problems:

I can find and display the random name form the list but I cannot pass in the luckyName function and display it if is not the same of the user's name.
In case the name of the current user is the same of the picked up name, I 'm not sure how to or what's the best way to pick up another name. So far I just call again the pickRandomName function.

Html:

<h3>Santa ask: Who are you kid?</h3>
    <section>
        <input type="text" placeholder="YOUR name bitte, not time for joke.." id='santaName'/>
        <div id="go">Go</div>
    </section>

js:

var nameList = [
    'gio',
    'anna',
    'chiara',
    'ella',
    'sarah',
    'sara'
];

$(document).ready(function(){
    pickRandomName();
    luckyName();
});

var luckyName = function(randomName){
    var section = $('section');
    $('section').on('click', '#go', function(){
        var currentSanta = $('#santaName').val();
        console.log(currentSanta);

        if( currentSanta != randomName){
            console.log(randomName);
            $('section').append(randomName);

        } else {
            //pick up another random name
            pickRandomName(randomName);
            console.log(randomName);
        }



    });
};

var pickRandomName = function(randomName){
    var randomName = nameList[Math.floor(Math.random() * nameList.length)];
    console.log(randomName);
};

and here the fiddle: http://jsfiddle.net/anaketa/r9morh87/1/

JavaScript is asynchronous so you can not just assume that things are available for you when you need them. Look how to make a callback function and make pickRandomName return the randomly selected name and then you can use the returned name in the luckyName function. — Jonast92, Dec 01 '14 at 13:06
you are right and I like the idea to make thing in the right way like doing with callback seems so. But do I really need it? I was trying to avoid to do unnecessary steps — Giorgia Sambrotta, Dec 01 '14 at 13:23
@Jonast92 - JS *can* be asynchronous, but there's no reason to have any asynchronous code in implementing the OP's requirement. Everything that needs to happen in response to the button click can be synchronous - no need for any callbacks. — nnnnnn, Dec 21 '14 at 09:08

Dimag Kharab · Answer 1 · 2014-12-01T13:30:19.827

0

Try this,

var nameList = [
  'gio',
  'anna',
  'chiara',
  'ella',
  'sarah',
  'sara'
];

$(document).ready(function() {
  var randomName = nameList[Math.floor(Math.random() * nameList.length)];

  //console.log( nameList[Math.floor(Math.random() * nameList.length)]);

  $('#go').on('click', function() {

    luckyName(randomName);
  });



});

var luckyName = function(randomName) {

  var section = $('section');

  $('section').on('click', '#go', function() {
    var currentSanta = $('#santaName').val();
    console.log(currentSanta);

    if (currentSanta != randomName) {
      console.log(randomName);
      $('section').append(randomName);

    } else {
      //pick up another random name
      pickRandomName(randomName);
      console.log(randomName);
    }

  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<h3>Santa ask: Who are you kid?</h3>
<section>
  <input type="text" placeholder="YOUR name" id='santaName' />
  <div id="go">Go</div>
</section>

edited Dec 01 '14 at 13:30

answered Dec 01 '14 at 13:08

Dimag Kharab

4,439
1
24
45

I know it's just a small thing, but your code might lead to confusion while debugging because the randomName you will see in the console might not be the randomName the code is using as you pick a random name twice. – Jonas Grumann Dec 01 '14 at 13:10
@jonas check now , I guess this is what OP is looking for – Dimag Kharab Dec 01 '14 at 13:11
I like more the idea to keep the code in different functions and not all together in the ready function – Giorgia Sambrotta Dec 01 '14 at 13:24
@GiorgiaSambrotta check now – Dimag Kharab Dec 01 '14 at 13:30

score 0 · Accepted Answer · edited May 23 '17 at 12:13

0

Here is the working fiddle for your code.

$(document).ready(function(){ window.randomName =pickRandomName(nameList);/*we have created an global variable which will store randomName*/ luckyName(nameList); });

function luckyName(nameList){ var section = $('section'); $('section').on('click', '#go', function(){ var currentSanta = $('#santaName').val(); console.log(currentSanta); if( currentSanta != window.randomName){ console.log(window.randomName); $('section').append(window.randomName); } else { //pick up another random name window.randomName = pickRandomName(nameList);/*It will change the global var window.randomName value*/ console.log(x); } }); }

function pickRandomName(randomName){ var randomName1 = nameList[Math.floor(Math.random() * nameList.length)]; console.log(randomName1); return randomName1; };

I am passing the value between functions by using window.randomName (Learn more about different kinds of variable here). By defining window.randomName we have attached a property to window, like "window.location", which can accessed by all the functions whenever and wherever they want without the need to passing the argument to function again and again and also the function can change it's value so whenever we need to pass a variable to different function this is one way to do it.

edited May 23 '17 at 12:13

Community

1
1

answered Dec 01 '14 at 13:21

Gaurav Kalyan

1,897
2
14
21

cool! that's more what i was looking for. Question: In pickRandomName function, why you call the var in a way 'randomName1' and the arg of the function with another name 'randomName'? Is there any particular reason for that? And: Can you explain me better this part: luckyName(pickRandomName(nameList),nameList); Why you need to pass the list in the pickRandomName funct. and why you pass it as arg for the luckyName? thankss – Giorgia Sambrotta Dec 01 '14 at 13:30
1. See I called `randomName1` because the argument taken by the function is an array and the output I need is a string so I used that but if you use randomName it will also work but It is not good to use it as sometimes error occurs because of object type. 2. I passed`nameList` in the function because we are required to call `pickRandomName function` again to generate the random name as the argument taken by my functions are "random name"(which is generated on function call) and array of name. – Gaurav Kalyan Dec 01 '14 at 13:39
@GiorgiaSambrotta I have updated my code a little bit so that if user type picked randomly generated name then a new random generated name will take its place. Please, look into it. It is kind of cool. – Gaurav Kalyan Dec 01 '14 at 14:03
that is great and what i was looking for. Simple and clean code. And thank you for the explanation in particular. – Giorgia Sambrotta Dec 01 '14 at 14:08
Your welcome. :). In general whenever you need to pass variable between different functions and each function can change variable value, then you need to use environment variables. – Gaurav Kalyan Dec 01 '14 at 14:18
Ah! Thanks I really need a general explanation! :) so i can use next time as well.Last thing: can you update with the last code also here above? I'm not sure if your last update with the new generated name in F case is the one with window.randomName or the one with x = pickRandomName. – Giorgia Sambrotta Dec 01 '14 at 14:21
Actually environment var or even better custom main Object is what I always use but i was wondering if there was a better or just easier way to do it in a super simple program like that one. Seems there isn't – Giorgia Sambrotta Dec 01 '14 at 14:24
Ok. I am going to update my code here with proper explanation. It is the one with window.randomName. – Gaurav Kalyan Dec 01 '14 at 14:24

How to pass value between functions?

2 Answers2