2 回答

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 問題。
添加回答
舉報