我正在学习 js，最近，我为我的英语和我的问题的明显性道歉。我有两个问题，我会很感激纯 JavaScript 的解决方案。按照几个教程，我在 HTML 页面中安装了一个 localStorage 脚本。页面1.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>假设用户输入名称“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>第一个问题由于我的错误，NAME 仅出现一次，还是必须如此？我应该使用另一种语法让它出现几次吗？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>第二个问题在第 3 页中，用户必须选择他想被称为男性、女性还是中性。一种解决方案是根据选择的类型设置三个不同的页面。但是这种解决方案并不优雅，并且会增加页数。我似乎在某处读到，使用 js 可以转到另一个页面，同时通过链接设置布尔变量的值（真/假）。像这样的东西（发明了语法）：<a href="female.html" set var f true> female</a>这将允许您创建一个插入三个“if”的登录页面： if (female true) { text = "brava"; } else if (male true) { text= "bravo"; } else { text = "bene"; }是否有可能做到这一点？如何？我已经多次尝试过这个脚本htmlgoodies，但对我来说太难了。你好，首先，我要感谢@cssyphus 和@Shahnawazh 的回答。问题 1我设法使用脚本在同一页面上多次显示名称：<script> var result = document.getElementsByClassName('result');[].slice.call(result).forEach(function (className) { className.innerHTML = localStorage.getItem("textvalue"); }); </script>但是，我真的需要将它包含在需要显示名称的所有页面上吗？我还尝试将脚本插入外部 js 页面，但名称甚至没有出现一次。问题2至于第二个问题，我没有得到肯定的结果。
2 回答
慕勒3428872
TA贡献1848条经验 获得超6个赞
而不是使用id，您可以class用于显示结果，因为 id 是唯一的。此外，对于存储男性、女性或中性，您可以使用单选按钮，当您单击其中任何一个时，只需将结果保存在localStorage. 这是三页。
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>
九州编程
TA贡献1785条经验 获得超4个赞
您刚刚发现了为什么同一页面上不能有两个具有相同 ID 的元素 - 只有第一个可以工作。但是，类的工作方式几乎与 ID完全相同，因此只需className在两个位置使用相同的 ID：
<p>Hi <span class="result">Lucy<span> ...
...
<p>How are you today <span class="result">Lucy</span> ...
至于您的第二个问题，只需再次使用 localStorage 即可。设置一个不同的 localStorage 变量并读/写它。
但是，您可能想到的是使用查询字符串，如下所示：
<a href="person.html?gender=f">female</a>
有关信息和代码示例，请参阅此 SO 问题。
添加回答
举报
0/150
提交
取消