How to use a variable over again

Question

I am very new to Jquery and Javascript. I tried searching for an answer to my question on the site, but I am not sure if I am even using the correct terms to find my answer. If there is an answer already I would appreciate the link so I can look at it.

My question: I am building a mobile app using HTML, CSS, Jquery and Javascript. It's an interactive CYOA type game/app. I used the following function to have the player enter their name:

<script> //to get player's name and use through out the game
function playerName ()
{
    var x;
    var player=prompt("Please enter your name");
if (player!=null)
    {
    x= " " + player + ", Please wait while the system updates your work orders";
    document.getElementById("logon").innerHTML=x;
    }
}
</script>

What I want to do is to be able to place the user's name through out the game. But I am not sure how I do that once the player initially enters their name in the prompt box.

Any help would be greatly appreciated. Thank you

Answer 1

Another solution (admittedly not the best) is to make playerName a property of the function. This exposes it without polluting global scope. Just demonstrating the capabilities of functions as objects in JS.

function playerName ()
{
    var x;
    var player=prompt("Please enter your name");
    if (player!=null)
    {
        x= " " + player + ", Please wait while the system updates your work orders";
        document.getElementById("logon").innerHTML=x;
    }
    playerName.player = player;
}

Answer 2

In order to use the variable x through-out other functions and your script you can make it global, to make a variable global inside a function you can try this:

<script>
function foo() {
    window.newGlobalVariable = 'moo';
}
</script>

for example in your code:

<script> //to get player's name and use through out the game
function playerName (){

    widnow.x;
    widnow.player=prompt("Please enter your name");
   if (player!=null){
       x= " " + player + ", Please wait while the system updates your work orders";
       document.getElementById("logon").innerHTML=x;
   }
}
</script>

Answer 3

Perhaps it would suffice to make a player object, like this:

var player = {};

Put that in your application, outside of any other functions. Then, when you need to set a value on the player, for example, his/her name, put this in the function:

player.name = prompt("Please enter your name");

This way, you have that data accessible to you, but you don't have to use globals, which are variables created without the var keyword and widely considered pretty bad form.

Answer 4

I shutter to suggest this, but you can make the player variable global.

var player;

function playerName () {
    var x;
    player=prompt("Please enter your name");
    if (player!=null) {
        x= " " + player + ", Please wait while the system updates your work orders";
        document.getElementById("logon").innerHTML=x;
    }
}

Answer 5

defining a global variable at the window level is typically the way to do this in jQuery - "window.player" in this case. While you technically can make this global by simply omitting "var", it is not recommended.

Answer 6

Create a single global namespace for your entire application, and put any relevant values there.

var MyApp = {};

MyApp.playerName = function () {
    var x;
    MyApp.player=prompt("Please enter your name");
    if (MyApp.player!=null) {
        x= " " + MyApp.player + ", Please wait while the system updates your work orders";
        document.getElementById("logon").innerHTML=x;
    }
}

You'll need to change your invocation of playerName() to MyApp.playerName().

Answer 7

What you're facing is variable scope. A variable is only visible from the block (think braces {}) it's declared in.

However, you can also access other variables that are already in an outer scope, such as window. to give an illustrated example:

alert(foo); // undeclared
alert(window.bar); // undeclared--so far...

function foo(){
  var foo = "foo";
  window.bar = "bar";

  alert(foo); // works -- "foo";
  alert(window.bar); works -- "bar";
}

alert(foo); // undeclared
alert(window.bar); // undeclared (still, haven't called foo() yet)

foo();
alert(window.bar); // "bar" (now it works)

this also applies to the name of functions and any other kinds of references you may have, However, in a case like this you can return a value from the function and avoid using a global variable.

Answer 8

You can avoid making it global by scoping it like this:

(function() {
    var player;
    function playerName ()
    {
        var x;
        player=prompt("Please enter your name");
        if (player!=null)
        {
            x = " " + player + ", Please wait while the system updates your work orders";
            document.getElementById("logon").innerHTML=x;
        }
    }   
})();

The player variable is now accessible to any code that you write inside of the outermost function declaration (but not globally).

Answer 9

I'd suggest something as simple as the following, so long as the player variable is defined outside of any functions (and here it is, since the value is returned from the function) it'll have global scope (you could also achieve this by omitting the var keyword, which makes the variable global scope regardless of where it's defined):

function playerName(){
    var name = prompt('What is your name?'),
        x;
    if (player) {
        x = " " + name + ", Please wait while the system updates your work orders";
        document.getElementById("logon").innerHTML=x;
    }
    return name;
}
var player = playerName;

Answer 10

Create a gloval variable, outside the function:

var player='';

then You can set it from a function:

function myFunction(){ player='new name'; }

or read it:

function myOtherFunction(){ console.log(player) }