title: Javascript - Cannot get function to set global variable to be used outside function
body: <p>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. </p>
  
  <p>The problem is, I can't get the variable to set globally. It works when called inside the function, but nowhere else.</p>
  
  <p>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 <code>var</code> before the variable inside the function to make it global in scope. </p>
  
  <p>I have looked for solutions and nothing seems to work! Am I missing something with the order of my script?</p>
  
  <p>Here is the javascript:</p>
  
  <pre><code>var cb2 = '&lt;input id="button" type="button" value="Continue" onclick="replace(\'gamebox\',next3,\'continueBttn\',cb3);"&gt;';
  var cb3 = '&lt;input id="button" type="button" value="Continue" onclick="getName();"&gt;';
  var cb4 = '&lt;input id="button" type="button" value="Continue" onclick="replace(\'gamebox\',next5,\'continueBttn\',cb5);"&gt;';
  var cb5 = '&lt;input id="button" type="button" value="Continue" onclick="replace(\'gamebox\',next6,\'continueBttn\',cb6);"&gt;';
  
  
  var testName = "Test Name";
  var player1;
  
  var next2 = "&lt;p&gt;Great, you've certainly got an adventurer's spirit! Now I just need a few details about you and your party.&lt;/p&gt;";
  var next3 = "&lt;p&gt;First, I'd like to get everyone's name&lt;/p&gt;"
  var next4 = "&lt;p&gt;Thanks " + testName + "!&lt;/p&gt;"
  var next5 = "&lt;p&gt;Now you're ready " + player1 + "! Click to set out on the trail!&lt;/p&gt;"
  
  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);
  }
  </code></pre>
  
  <p>And here is the html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
      &lt;head&gt;
  
      &lt;link rel="stylesheet" type="text/css" href="oregon.css" /&gt;
  
      &lt;/head&gt;
  
      &lt;body&gt;
  
          &lt;div id="gameContainer"&gt;
  
              &lt;div id="gamebox"&gt;
  
              &lt;p&gt;Welcome to the Oregon Trail! Click Continue to travel the trail!&lt;/p&gt;
  
              &lt;/div&gt;
  
          &lt;/div&gt;
  
      &lt;div id="continueBttn"&gt;&lt;input id="button" type="button" value="Continue" onclick="replace('gamebox',next2,'continueBttn',cb2);"&gt;&lt;/div&gt;
  
      &lt;/body&gt;
  
  
      &lt;/html&gt;
  
      &lt;script src="oregon.js" type="text/javascript"&gt;&lt;/script&gt;
  </code></pre>