【发布时间】：2020-11-08 04:08:26
【问题描述】：
这个讨论是这个帖子的衍生：passing-variables-between-pages，
我已经编辑了问题，以便更清楚地了解脚本，请谁会给出任何答案，以使用此版本中使用的面额。
A.html
<form action="b.html"> // username field, let's say "Macbeth"
<input type="text" id="txt"/>
<input type="submit" value="nome" onClick="passvalues();"/>
</form>
<span id="result">Macbeth</span> // display username
<script>
function passvalues()
{
var nme = document.getElementById("txt").value; // set var username nme = textvalue
localStorage.setItem("textvalue", nme);
return false;
}
</script>
设置 localStorage 并显示它。
B.html
// show the username multiple times in an html text.
<p><strong><span class="result">Macbeth</span></strong>, Nice name!
It's the first time I've heard it! mmm...and tell me<strong>Macbeth<span class="result"></span></strong> which gender you are?</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>
// form to obtain the gender chosen by the user, let's say "male"
`<p>I am a <span class="selectedGender"></span> of course!</p>`
// display the selected gender
<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>
<script>
var selectedGender = document.getElementsByClassName('selectedGender');
{
className.innerHTML = localStorage.getItem("textvalue");
};
</script>
有效，显示所选性别。
C.html
我真的，真的很抱歉，但我在这里完全迷失和困惑。 我尝试了几次建议的解决方案之一：
<span id="welcome"></span> to page 4 <span id="name"></span>
<script>
var username = localStorage.getItem("textvalue");
var usergender = localStorage.getItem("gender");
document.getElementById('name').innerHTML = username;
document.getElementById('gender').innerHTML = usergender;
if (usergender === 'female'){
document.getElementById('welcome').innerHTML = 'brava';
}else if (usergender === 'male'){
document.getElementById('welcome').innerHTML = 'bravo';
}else{
document.getElementById('welcome').innerHTML = 'bene';
}
</script>
我知道我是个没救的人，我不明白。
- 我必须在哪个页面中插入此脚本？
- 这个脚本替换了之前的脚本？
我不能使用与用户名相同的脚本吗？
1 - 得到选择：“selectedgender”
2 - 显示它（当然要更改元素名称）
<script>
function passvalues()
{
var nme = document.getElementById("txt").value; // set var username nme = textvalue
localStorage.setItem("textvalue", nme);
return false;
}
</script>
3 - 并显示：
<span id="result">Macbeth</span> // display username
感谢您的关注。
【问题讨论】：
-
很难从您发布的代码中理解发生了什么。但是，您在 localStorage (
localStorage.setItem("gender", this.value);) 中的gender键下设置了性别，但后来您尝试使用textvalue键获取性别值。尝试使用相同的密钥获取性别，例如localStorage.getItem("gender"); -
感谢您的评论。我发布了原始帖子的链接，检查它。它有效，但仅适用于第一页。我试过用“性别”来，什么都没有。
-
您是否尝试在
getItem中使用相同的gender键？ -
@Meimei 请参阅下面的答案。 Hitesh 的答案也是正确的，因此您应该对其进行投票（与选择正确答案不同）。在 StackOverflow 上有两种表示感谢的方式：upvoting 和 checkmark。 这两种方法都不会让你付出任何代价，但每一种都会给写下答案的人一个奖励。如果你真的喜欢一个答案，你可以两者都赞成它（向上三角形）并选择它是正确的（复选标记）。您只能勾选一个答案，但您可以随心所欲地投票（同样，投票不会花费您任何费用）。在获得 15 分之前，您不能投票
-
嗨@cssyphus，cmets 的空间非常有限，所以我编辑了问题以澄清我的问题。您的解决方案非常好，但我不能使用它。关于“漂亮的代码”，如果我删除它，整个脚本都不起作用（当然是我的错），问候。
标签： javascript jquery radio-button local-storage global-variables