如何保存文本框中的输入，然后移动到下一页？（Javascript/HTML）

作为我新工作的一部分，我正在创建一个小表单，用户在其中回答问题，然后保存并在页面末尾输出

我一开始有一个提示，要求用户解释他们的答案（这非常有效！），但是我被要求将其更改为一个输入框

基本上，我需要做的过程是：

用户在文本框中输入->单击下一步按钮->将输入保存到会话变量并移动到下一页

到目前为止，我在正文中有以下HTML：

<form name="next" action='#' method=post>
    Explanation:<input type="text" id="xp" required><br>
    <button class="nextButton" onclick="return explanation()">Next</button>
</form>

到目前为止，结果是：

• 文本框已清除，但屏幕上未保存或显示任何内容
• 不显示下一页

---

如有任何帮助/建议，将不胜感激。我对js比较陌生，所以我很感激！我很清楚周围也有类似的问题，我只是看不出哪里出了问题。

当您单击

nextButton

时，浏览器运行

explainion（）

，然后尝试执行表单的

操作。因为您的操作是
action='#'
它只是尝试重新加载页面，阻止
document.location.href
正常工作

实际上，您可以尝试不在框中输入任何内容，然后单击按钮。重定向将起作用，因为表单是空的，因此没有要提交的内容。
@David是对的。您可以添加
event.preventDefault（）
函数来防止表单的默认行为，即提交。否则，您的代码似乎可以工作

function explanation() {
    event.preventDefault(); // <-- add here
    var exp = document.getElementById('xp').value;
    sessionStorage.setItem("p1_reason", exp);
    alert(exp);
    window.location.href = 'page2.html';
}

函数解释（）{
event.preventDefault（）；//你想让xp值显示在第2页上？你说屏幕上什么也不显示，你的意思是
警报
也不显示吗？另外，你也不显示从
会话存储
读取的任何代码。你有两个选项：在函数中返回false或给予action='page2.html'@David：谢谢。老实说，我不同意e、 不得不使用谷歌。谢谢你的快速回复，这非常有效。
function explanation() {
    event.preventDefault(); // <-- add here
    var exp = document.getElementById('xp').value;
    sessionStorage.setItem("p1_reason", exp);
    alert(exp);
    window.location.href = 'page2.html';
}