CODEWITHSUNDEEP
javascript
Peter Stark
Peter Stark

Reputation: 77

JavaScript Page State

I am trying to put a page state together but am having trouble going back to the original home state. After I click Link 1, it goes to that page, but once I click "back" nothing happens and console shows that id name 'back' is a null. I guess because the id doesn't exist in the first page state?

Here are my codes:

const PageState = function() {
  let currentState = new homeState(this);
  this.init = function() {
    this.change(new homeState);
  }
  this.change = function(state) {
    currentState = state;
  }
};

// HOME
const homeState = function(page) {
  document.querySelector('#output-heading').textContent = null;
  document.querySelector('#output-content').innerHTML = `
     <div id="link-1">Link 01</div>
     <div id="link-2">Link 02</div>
     <div id="link-3">Link 03</div>
    `;
};

// LINK 02
const secondState = function(page) {
  document.querySelector('#output-heading').textContent = 'Page 02';
  document.querySelector('#output-content').innerHTML = `
     <p>This is the second page.</p>
     <div id="back">GO BACK</div>
    `;
};

// LINK 03
const thirdState = function(page) {
  document.querySelector('#output-heading').textContent = 'Page 03';
  document.querySelector('#output-content').innerHTML = `
    <p>This is the third page.</p>
    <div id="back">GO BACK</div>
    `;
};

// INIT PAGESTATE
const page = new PageState();

// INIT FIRST STATE
page.init();

// UI VARS
const one = document.getElementById('link-1'),
  two = document.getElementById('link-2'),
  three = document.getElementById('link-3');
back = document.getElementById('back');

one.addEventListener('click', (e) => {
  page.change(new firstState);
  e.preventDefault();
});

two.addEventListener('click', (e) => {
  page.change(new secondState);
  e.preventDefault();
});

three.addEventListener('click', (e) => {
  page.change(new thirdState);
  e.preventDefault();
});

back.addEventListener('click', (e) => {
  page.change(new homeState);
  e.preventDefault();
});
<div class="container-output">
  <h4 id="output-heading"></h4>
  <div id="output-content"></div>
</div>

Upvotes: 0

Views: 848

Answers (1)

bas
bas

Reputation: 15722

After I click Link 1, it goes to that page, but once I click "back" nothing happens and console shows that id name 'back' is a null. I guess because the id doesn't exist in the first page state?

Yes that is the problem.

You could instead do something like this:

const homeState = function() {
  document.querySelector("#output-heading").textContent = null;
  document.querySelector("#output-content").innerHTML = `
      <div id="link-1">Link 01</div>
      <div id="link-2">Link 02</div>
      <div id="link-3">Link 03</div>
  `;
  const one = document.getElementById("link-1");
  const two = document.getElementById("link-2");
  const three = document.getElementById("link-3");

  one.addEventListener("click", (e) => {
    generatePageState("Page 01", "This is the first page.");
  });

  two.addEventListener("click", (e) => {
    generatePageState("Page 02", "This is the second page.");
  });

  three.addEventListener("click", (e) => {
    generatePageState("Page 03", "This is the third page.");
  });
};

const generatePageState = function(heading, text) {
  document.querySelector("#output-heading").textContent = heading;
  document.querySelector("#output-content").innerHTML = `
      <p>${text}.</p>
      <div id="back">GO BACK</div>
  `;
  const back = document.getElementById("back");
  back.addEventListener("click", (e) => {
    homeState();
  });
};

homeState();
<div class="container-output">
  <h4 id="output-heading"></h4>
  <div id="output-content"></div>
</div>

After navigating to a page #output-content is set dynamically. The links are replaced by the paragraph and the button, so now that the button is in the layout we can add the event listener to it.

Upvotes: 1

Related Questions