title: Redirect to another page and continue game in Javascript
body: <p>I have made a browser based story RPG game and I would like to redirect the user if they clicked the button.  </p>
  
  <p>Here's the HTML for that page unedited:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;link href="css/styles.css" rel="stylesheet"&gt;
    &lt;script defer src="js/game.js"&gt;&lt;/script&gt;
    &lt;title&gt;Home&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="topnav"&gt;
      &lt;a class="active" href="index.html"&gt;Home&lt;/a&gt;
      &lt;a href="about.html"&gt;About&lt;/a&gt;
    &lt;/div&gt;
  
    &lt;div class="container"&gt;
      &lt;div id="text"&gt;Text&lt;/div&gt;
      &lt;div id="option-buttons" class="btn-grid"&gt;
        &lt;button class="btn"&gt;&lt;/button&gt;
        &lt;button class="btn"&gt;&lt;/button&gt;
        &lt;button class="btn"&gt;&lt;/button&gt;
        &lt;button class="btn"&gt;&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="warning"&gt;
        &lt;p&gt;CLICKING NAVIGATION LINKS AT TOP OF PAGE WILL RESET YOUR PROGRESS!&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  
  
  </code></pre>
  
  <p>In the game.js file, I created a function to redirect the user when the button is clicked:</p>
  
  <pre><code>function redirect() {
    window.location.href = "/foo/bar.html";
  }
  </code></pre>
  
  <p>and here is a snippet of the game to play:</p>
  
  <pre><code>{
      id: 2,
      text: 'story',
      options: [{
          text: 'text',
          requiredState: (currentState) =&gt; currentState.item,
          setState: {
            item1: false,
            item 2: true
          },
          nextText: 3
        },
        {
          text: 'text',
          requiredState: (currentState) =&gt; currentState.item,
          setState: {
            item1: false,
            item2: true
          },
          nextText: 4
        },
        {
          text: 'Attack the enemy!',
          redirect()
        },
  
  </code></pre>
  
  <p>Notice where redirect() is, that's when it will redirect the player to another part of the site and continue playing or be killed.</p>
  
  <p>The whole div container breaks and does not display anything when I place that redirect() in there.</p>
  
  <p>How do I redirect the user to another html page?</p>