How to pass a dynamic variable from one html page to javascript?

Question

I have an html page (profileDisplay.html) that loads a profile page depending on which person they click on in the previous page (roster.html). The profileDisplay.html is suppose to do some javascript on page load that decides what values to get from firebase to display for the profile page. The javascript is deciding which profile to get by whatever the user click on in roster.html, but I have no clue how to do that. Here is the code I have now. I tried to do it by putting a hidden paragraph that has the correct value to pass into the javascript, but I can't do it with the same id for all the different people on the roster.

 // this is roster.html
 
    <h2> Roster </h2>
    <ul>
      <li><a href ="roster\profileDisplay.html"> a guy </a> - <a href = "roles\president.html"> President <p class = "invisible" id = "chosenRoster">showerswithdad</p></a></li>
      <li><a href = "roster\nathan_faynzilberg.html"> another guy </a> - <a href = "roles\vicePresident.html"> Vice President </a></li>
      <li><a href = "roster\profileDisplay.html"> me </a> - General Member <p class = "invisible" id = "chosenRoster">shitsmear</p></li>
    </ul>

document.addEventListener("DOMContentLoaded", event => {

  const app = firebase.app();

  const userDB = firebase.database().ref("users");

  const user = userDB.child(document.getElementById("chosenRoster").innerHTML);

  var realName = user.child('name');


  realName.once("value")
      .then(function(snapshot) {
        document.getElementById("roster_name").innerHTML = snapshot.val();
      })

})

  //this is profileDisplay.html
  
  <script src = "..\javascript\profileDisplay.js"></script>

    <div class = "memberPage">
      <picture>
        <img src="#">
      </picture>
      <h2 class = "noMargin"><p id = "roster_name"></p></h2>
      <ul class = "noMargin">
        <li> Major: WIP </li>
        <li> Minor: WIP </li>
        <li> Grade: WIP </li>
        <li> Expected Graduation Year: WIP </li>
        <li> Position: <a href = "..\roles\president.html"> President </a> </li>
        <li> Brother Name: Showers With Dad </li>
        <li> Class: Zeta </li>
        <li> Big: WIP </li>
        <li> Little(s): WIP </li>
        <li> Fun Fact: Went to boarding school, "<a href = "https://www.stjames.edu/">Saint James</a>", in Maryland. </li>
        <li> Sweetheart: WIP </li>
      </ul>
    </div>

This is the firebase database that the javascript is accessing.

This may be a bad question, but I've been scratching my head about this for 2 days and still can't figure it out, so how would I do this. My main goal is to have one html page that can load a profile based on what who the user wants it to display.

f = "... d = " ....not an issue but... please use href=" id=" — Roko C. Buljan
– Roko C. Buljan, Commented Nov 23, 2019 at 21:37
You're right, but I habitually do that, because when I started coding in java, I didn't like how ""+"" looked, so I always did "" + "". Slowly am making an effort to change that tho. — ashburnh
– ashburnh, Commented Nov 23, 2019 at 21:42
It seems you are looking for that: codeproject.com/Questions/795191/… or webdeveloper.com/d/… — Renaud Tarnec
– Renaud Tarnec, Commented Nov 23, 2019 at 22:54
@RenaudTarnec That worked! Thank you so much. Also how do I mark a comment as the answer? — ashburnh
– ashburnh, Commented Nov 24, 2019 at 20:20
@ashburnh Glad I could help you! I've just written an answer below. Thanks in advance for marking it as the correct answer. — Renaud Tarnec
– Renaud Tarnec, Commented Nov 24, 2019 at 22:09

Renaud Tarnec · Accepted Answer · 2019-11-24 23:16:18Z

You could pass the values through query string parameters.

The two following HTML pages show an example. Open page1.html and click on the button.

page1.html code

<!DOCTYPE html>
<html>
  <head>
    <title>Page1</title>
  </head>
  <body>
    <button id="myBtn">Open page 2</button>
    <script>
      var value1 = 'value1';
      var value2 = 'value2';
      var queryString = '?para1=' + value1 + '&para2=' + value2;

      document.getElementById('myBtn').addEventListener('click', function() {
        window.location.href = 'page2.html' + queryString;
      });
    </script>
  </body>
</html>

page2.html code

<!DOCTYPE html>
<html>
  <head>
    <title>Page2</title>
  </head>
  <body>
    <h4>These are the data from page1.html.</h4>
    <script>
      var queryString = decodeURIComponent(window.location.search);
      queryString = queryString.substring(1);
      var queries = queryString.split('&');
      for (var i = 0; i < queries.length; i++) {
        document.write(queries[i] + '<br>');
      }
    </script>
  </body>
</html>

Collectives™ on Stack Overflow

How to pass a dynamic variable from one html page to javascript?

1 Answer 1

page1.html code

page2.html code

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

page1.html code

page2.html code

Comments

Your Answer

Sign up or log in

Post as a guest

Related