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.
1 answers
solution1
1 ACCPTED 2019-11-24 22:08:34
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 + '¶2=' + 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.