Passing variables between pages using localStorage and passing variables in a link
Question
I am learning js, recently, I apologize for my English and for the obviousness of my questions. I have two problems, I would appreciate solutions in pure JavaScript.
Following several tutorials, I installed a localStorage script in an HTML page.
pag1.html
<p> Hello! what's your name?</p>
<form action="pag2.html">
<input type="text" id="txt"/>
<input type="submit" value="nome" onClick="passvalues();"/>
</form>
// the form has a link to pag2.html
<script>
function passvalues()
{
var nme=document.getElementById("txt").value;
localStorage.setItem("textvalue",nme);
return false;
}
</script>
Let's say the user enters the name "Lucy":
pag2.html
<p>Hi <span id="result">Lucy<span> nice to meet you!</p>` // the name appears
<p>How are you today <span id="result">NOTHING</span>?</p>` // the name does not appear
<a href="pag3.html">pag3</a>
<script>
document.getElementById("result").innerHTML = localStorage.getItem("textvalue");
</script>
First Question
the NAME appears only once for my mistake or must it be so? Should I use another syntax to make it appear several times?
pag3.html
<p><span id="result">Lucy</span>which gender designation do you prefer to be used with you?</p>
<p><a href="male.html">male</a></p>
<p><a href="female.html">female</a></p>
<p><a href="neutral.html">neutral</a></p>
<script>
document.getElementById("result").innerHTML = localStorage.getItem("textvalue");
</script>
Second Question
In pag 3 the user has to choose whether he wants to be called male, female or neutral.
One solution is to set three different pages according to the genre chosen. But this solution is not elegant and inflates the number of pages.
I seem to have read somewhere that with js it is possible to go to another page and at the same time set the value of a Boolean variable (true / false) through a link.
Something like this (the syntax is invented):
<a href="female.html" set var f true> female</a>
This would allow you to create a single landing page with the insertion of three "if":
if (female true) {
text = "brava";
} else if (male true) {
text= "bravo";
} else {
text = "bene";
}
Is it possible to do this? How? I have tried this script htmlgoodies several times but it is too difficult for me.
Hello,
First of all I'd thank @cssyphus and @Shahnawazh for the answers.
Question 1
I managed to show the name several times on the same page with the script:
<script>
var result = document.getElementsByClassName('result');
[].slice.call(result).forEach(function (className) {
className.innerHTML = localStorage.getItem("textvalue");
});
</script>
But, do I really need to include it on all pages that need to show the name? I also tried to insert the script into an external js page but the name did not appear even once.
Question 2
As for the second question, I did not get positive results.
2 answers
solution1
1 ACCPTED 2020-07-11 17:16:09
Rather than using id , you can use class for showing result because id is unique. Also for storing male, female or neutral you can use radio buttons, and when you click any of them, just save the result in the localStorage . Here are the three pages.
page1.html
<body>
<p> Hello! what's your name?</p>
<form action="page2.html">
<input type="text" id="txt" />
<input type="submit" value="name" onClick="passvalues();" />
</form>
<script>
function passvalues() {
var nme = document.getElementById("txt").value;
localStorage.setItem("textvalue", nme);
return false;
}
</script>
</body>
page2.html
<body>
enter code here
<p>Hi <span class="result">Lucy<span> nice to meet you!</p>
<p>How are you today <span class="result"></span>?</p>
<a href="page3.html">page3</a>
<script>
var result = document.getElementsByClassName('result');
[].slice.call(result).forEach(function (className) {
className.innerHTML = localStorage.getItem("textvalue");
});
</script>
</body>
page3.html
<body>
<p><span class="result"></span> which gender designation do you prefer to be used with you?</p>
<form name="genderForm" action="">
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="neutral"> Neutral
</form>
<p>You've selected <span class="selectedGender"></span></p>
<script>
var result = document.getElementsByClassName('result');
[].slice.call(result).forEach(function (className) {
className.innerHTML = localStorage.getItem("textvalue");
});
var rad = document.genderForm.gender;
var prev = null;
for (var i = 0; i < rad.length; i++) {
rad[i].addEventListener('change', function () {
(prev) ? console.log(prev.value) : null;
if (this !== prev) {
prev = this;
}
console.log(this.value);
document.getElementsByClassName("selectedGender")[0].innerHTML = this.value;
localStorage.setItem("gender", this.value);
});
}
</script>
</body>
solution2
0 2020-07-11 17:01:31
You have just discovered why you cannot have two elements on the same page with the same ID - only the first one will work. However, classes work almost exactly like IDs, so just use the same className at both locations:
<p>Hi <span class="result">Lucy<span> ...
...
<p>How are you today <span class="result">Lucy</span> ...
As to your second problem, just use localStorage again. Set a different localStorage variable and read/write that.
However, what you are probably thinking of is using a query string, like this:
<a href="person.html?gender=f">female</a>
See this SO question for information and code examples.
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.