how to exchange variables between two HTML pages?
In example1.html:
<a href='example2.html?myVar1=42'>a link</a>
<a href='example2.html?myVar1=43'>another link</a>
or generate the links with Javascript as desired. Just make sure the ?varName=value gets onto the end of example2.html somehow.
Then, in example2.html, you use Javascript to parse the query string that example2 came with.
To do this, you could try Querystring.
// Adapted from examples on the Querystring homepage.
var qs = new Querystring();
var v1 = qs.get("myVar1");
Alternatively, parent.document.URL contains the complete URI for the page you're on. You could extract that:
parent.document.URL.substring(parent.document.URL.indexOf('?'), parent.document.URL.length);
and parse it manually to pull the variables you encoded into the URI.
EDIT: Forgot the 'new' part of 'new Querystring()'. Oops...
Passing a variable between HTML pages using JavaScript
The code below works for me, which isn't much different than yours. Maybe it's how your importing your javascript?
index.html
<html>
<head>
<title>Example</title>
<script type="text/javascript" src='./index.js'></script>
</head>
<body>
<input type = "text" id = "name">
<button onclick = "sv(); window.location.href = 'secondPage.html'">Submit now</button>
</body>
</html>
index.js
function sv() {
sessionStorage.setItem("theirname", document.getElementById("name").value);
}
secondPage.html
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<p id="output"></p>
</body>
<script type="text/javascript" src='./secondPage.js'></script>
<!-- The script must come after and not in the head, or else document.getElementById will be null -->
</html>
secondPage.js
document.getElementById("output").innerHTML = sessionStorage.getItem("theirname");
How to pass variable value between different html pages in javascript
You can pass the value as a url fragment.
In your on click function, open '/profile.html#'+text
In your profile.html get the url fragment.
Sample code:
To navigate to profile.html
window.location.href = '<path to profile.html>' + '#' + text;
In profile(), to get the parameter, use
var text = window.location.hash.substring(1)
Pass JavaScript variable between two HTML pages
If you do not want to use any server side technology then you can use query string. Add movie name as query string parameter while opening the new page then in new page access URL to fetch this variable.
<html>
<SCRIPT LANGUAGE="javascript">
function getMovieName() {
var movieName = document.getElementById('movieName').value;
window.open("display.html?myVar1=42&movieName=" + movieName);
}
</SCRIPT>
<head>
<form onsubmit="return getMovieName();" name="login-form" class="login-form" method="post">
<input id="movieName" type="string" class="Enetr Movie Name" placeholder="Movie Name" />
<input type="submit" name="submit" value="Search" class="button" />
</form>
</head>
</html>
Second Page:
<html>
<SCRIPT LANGUAGE="javascript">
window.onload = function(){
var movieName = getQueryVariable("movieName")
document.getElementById("app").src ="http://xfinitytv.comcast.net/search?query="+movieName+"&limit=1&or=true&resources=odol%2Crovi%2Cvod%2Cest&persona=8644&dacid=12%7C7";
}
function getQueryVariable(variable)
{
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){return pair[1];}
}
return(false);
}
</SCRIPT>
<head>
<div style="border: 3px solid rgb(201, 0, 1); overflow: hidden; margin: 15px auto; max-width: 550px;">
<iframe id="app" scrolling="no" src=""target="_top" style="border: 200px none;
margin-left: -20px; margin-top:-140px; width: 900px;height: 350px;">
</iframe>
</div>
</head>
</html>
Note: I have not written getQueryVariable function myself. Credit goes to this link.
How can I share JS variables between pages?
Store your variable value in localstorage like this:
Page 1
localStorage.setItem("key", "yourvalue");
page 2
document.getElementById("yourVariable").innerHTML = localStorage.getItem("key");
In your case, It will be:
Page 1
<html>
<head>Page 1</head>
<body>
<p id="nom">1</p>
<button onclick="YourFunctionName()">Your Button</button>
<script>
function YourFunctionName(){
document.getElementById("nom").innerHTML = parseInt(document.getElementById("nom").innerHTML) + 1;
localStorage.setItem("key", parseInt(document.getElementById("nom").innerHTML));
}
</script>
</body>
</html>
Page 2
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
</head>
<body>
<p id="nome"></p>
<script>
$(document).ready(function(){
document.getElementById("nome").innerHTML = localStorage.getItem("key");
});
</script>
</body>
</html>
Passing Variable through JavaScript from one html page to another page
Without reading your code but just your scenario, I would solve by using localStorage
.
Here's an example, I'll use prompt()
for short.
On page1:
window.onload = function() {
var getInput = prompt("Hey type something here: ");
localStorage.setItem("storageName",getInput);
}
On page2:
window.onload = alert(localStorage.getItem("storageName"));
You can also use cookies but localStorage allows much more spaces, and they aren't sent back to servers when you request pages.
Related Topics
Detect Rotation of Android Phone in the Browser with JavaScript
Is It Safe to Store a Jwt in Localstorage with Reactjs
What Is the Correct Way to Check for String Equality in JavaScript
How to Check If a JavaScript Object Is a Dom Object
JavaScript Filter Array Multiple Conditions
JavaScript Swap Array Elements
Verify If a Point Is Land or Water in Google Maps
What Is the Minimum Valid JSON
Get Mouse Wheel Events in Jquery
How to Download a File Using Window.Fetch
What Does the "|" (Single Pipe) Do in JavaScript
Addeventlistener Not Working in IE8
What's the Difference Between & and && in JavaScript
Cancel a Vanilla Ecmascript 6 Promise Chain
Controlling Fps with Requestanimationframe
How to Convert HTML to JSON Using PHP