Javascript - Cannot get function to set global variable to be used outside function

Question

I'm attempting to make a simple linear text game that will display inside a div on a webpage. I am using innerHTML to write the contents of the game to the div, and using onclick from a button to change the contents. My problem is that I would also like to include a few user-submitted variables, which I am trying to do using prompt() inside a function.

The problem is, I can't get the variable to set globally. It works when called inside the function, but nowhere else.

I've tried declaring the variable first outside the function, using window.variable (both inside and outside of the function) as well as leaving off the var before the variable inside the function to make it global in scope.

I have looked for solutions and nothing seems to work! Am I missing something with the order of my script?

Here is the javascript:

var cb2 = '<input id="button" type="button" value="Continue" onclick="replace(\'gamebox\',next3,\'continueBttn\',cb3);">';
var cb3 = '<input id="button" type="button" value="Continue" onclick="getName();">';
var cb4 = '<input id="button" type="button" value="Continue" onclick="replace(\'gamebox\',next5,\'continueBttn\',cb5);">';
var cb5 = '<input id="button" type="button" value="Continue" onclick="replace(\'gamebox\',next6,\'continueBttn\',cb6);">';


var testName = "Test Name";
var player1;

var next2 = "<p>Great, you've certainly got an adventurer's spirit! Now I just need a few details about you and your party.</p>";
var next3 = "<p>First, I'd like to get everyone's name</p>"
var next4 = "<p>Thanks " + testName + "!</p>"
var next5 = "<p>Now you're ready " + player1 + "! Click to set out on the trail!</p>"

var continueButton = function (content) {
    document.getElementById('continueBttn').innerHTML = content;
    };

function replace(id1,content,id2,cb) {
    document.getElementById(id1).innerHTML = content;
    document.getElementById(id2).innerHTML = cb;
}

function getName() {
    player1 = prompt("What is your Name?");
    alert("Your name is " + player1 + ".");
    replace('gamebox',next4,'continueBttn',cb4);
}

And here is the html:

<!DOCTYPE html>

<html>
    <head>

    <link rel="stylesheet" type="text/css" href="oregon.css" />

    </head>

    <body>

        <div id="gameContainer">

            <div id="gamebox">

            <p>Welcome to the Oregon Trail! Click Continue to travel the trail!</p>

            </div>

        </div>

    <div id="continueBttn"><input id="button" type="button" value="Continue" onclick="replace('gamebox',next2,'continueBttn',cb2);"></div>

    </body>


    </html>

    <script src="oregon.js" type="text/javascript"></script>

possible duplicate of [Define global variable in a JavaScript function](http://stackoverflow.com/questions/5786851/define-global-variable-in-a-javascript-function) — Diodeus - James MacFarlane, Jun 11 '12 at 20:01
have you tried binding the click handler in your script file instead of the markup? — jbabey, Jun 11 '12 at 20:03

score 1 · Accepted Answer · answered Jun 11 '12 at 20:41

Ok, I got your stuff to work. Take the var off of the variables to make them global and change your functions to be assigned to a variable like continueButton:

replace = function(id1, content, id2, cb) {
    document.getElementById(id1).innerHTML = content;
    document.getElementById(id2).innerHTML = cb;
}

getName = function() {
    player1 = prompt("What is your Name?");
    alert("Your name is " + player1 + ".");
    replace('gamebox', next4, 'continueBttn', cb4);
}

This got things working for me.

The other answers here have good points as well, you need a better way of handling the player name.

score 0 · Answer 2 · answered Jun 11 '12 at 20:05

player1 is used into the expression next5, not next4 (which is the one of your getName() function)

Anyway, it will never work like this. At the moment next5 is initialized the value of player1 was defined a certain way, and will remain defined that way unless you redefine the next5 variable again.

You need to encapsulate the next5 definition into a function in order to make it dynamic.

score 0 · Answer 3 · answered Jun 11 '12 at 20:06

Problem is here

var next5 = "<p>Now you're ready " + player1 + "! Click to set out on the trail!</p>"

It uses the variable when it is first rendered, it will not be updated when you set player1 to a new value.

You need to figure out a different way to set the player's name. One way of doing it is to replace it.

var next5 = "<p>Now you're ready {player1}! Click to set out on the trail!</p>"

and when you use it

var newStr = next5.replace("{player1}", player1);

Javascript - Cannot get function to set global variable to be used outside function

3 Answers3