Trying to get JS to replace innerHTML content using an array for text adventure

Question

I'm trying to create a very small text adventure using javascript. The first "page" contains a form to input information in the div, and I want to replace the information in the div every time the user presses "next".

CODE:

let name = [],
  age = [],
  place = [],
  verb = [];

document.getElementByID('story');

function nextPage() {
  let i = 0;
  i < showInfo.length;
  i++;


  let story = document.getElementById('story');
  let story.innerHTML = showInfo;
  let showInfo = [page1, page2, page3];
  let page1 = `Div replacement content 1`;
  let page2 = `Div replacement content 2`;
  let page3 = `Div replacement content 3`;
}

input[type="text"] {
  width: 100px;
}

<div id="story">
  <form>
    <h2>Start Your Adventure!</h2>
    <h3>Who are you?</h3>
    <p>Name: <input type="text" name="name" placeholder="Jessica"></p>
    <p>Age: <input type="text" name="age" placeholder="twenty"></p>
    <p>Hometown:<br>
      <input type="radio" name="place" id="Portland">Portland<br>
      <input type="radio" name="place" id="Vancouver">Vancouver<br></p>
    <p>Favorite activity:<br>
      <input type="radio" name="verb" id="swimming">Swimming<br>
      <input type="radio" name="verb" id="running">Running<br>
      <input type="radio" name="verb" id="cooking">Cooking<br></p>
  </form>
</div>
<button onclick="nextPage()">Next</button>

There's many syntax errors in your code: there's two let story declaration; you are accessing variable showInfo before initializate it; you are accessing page1, page2 and page3 before initializating them; getElementByID doesn't exists, it must be getElementById take care with case-sentive — Calvin Nunes
– Calvin Nunes, Commented Sep 9, 2019 at 21:28

symlink · Accepted Answer · 2019-09-09 21:33:07Z

You were pretty close, the main issue was with the order of your variables, and the fact that you have to keep track what page you're on with each click:

let name = [],
  age = [],
  place = [],
  verb = [],
  curPage = 0;



function nextPage() {
  let page1 = `Div replacement content 1`;
  let page2 = `Div replacement content 2`;
  let page3 = `Div replacement content 3`;
  let showInfo = [page1, page2, page3];

  let story = document.getElementById('story');
  story.innerHTML = showInfo[curPage];
  if (curPage < 2) {
    curPage++;
  }

}

input[type="text"] {
  width: 100px;
}

<div id="story">
  <form>
    <h2>Start Your Adventure!</h2>
    <h3>Who are you?</h3>
    <p>Name: <input type="text" name="name" placeholder="Jessica"></p>
    <p>Age: <input type="text" name="age" placeholder="twenty"></p>
    <p>Hometown:<br>
      <input type="radio" name="place" id="Portland">Portland<br>
      <input type="radio" name="place" id="Vancouver">Vancouver<br></p>
    <p>Favorite activity:<br>
      <input type="radio" name="verb" id="swimming">Swimming<br>
      <input type="radio" name="verb" id="running">Running<br>
      <input type="radio" name="verb" id="cooking">Cooking<br></p>
  </form>
</div>
<button onclick="nextPage()">Next</button>

Collectives™ on Stack Overflow

Trying to get JS to replace innerHTML content using an array for text adventure

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related