Question

我写了一个小小的个性测验。从下拉菜单中选择答案并提交表单（id="quizgenerator）后，表单本身会在以下代码行的帮助下被结果替换：

document.getElementById('quizgenerator').innerHTML = "<p id='result'  
align='center'><b>" + result + "</b></p>";

到目前为止，这么好。现在到了棘手的部分，我无法弄明白：我希望人们能够“回到”表格并再次进行测验，更改他们的答案并重新提交以查看他们可能最终结果然后重新加载页面。

我无法在表单中添加重置按钮，因为表单会被结果替换。所以现在我在表单外添加了一个重置按钮：

<input type="reset" value="Reset" id="submit" onClick="history.go(0);">

这样可行，但会重新加载页面。有没有办法在不重新加载的情况下重置innerHTML部分？

我已经在网上搜索了答案，但在所有这些情况下，重置按钮始终是表单的一部分。

Answer 1

以下是一些说明我评论的简单代码。

http://jsfiddle.net/Bk8rH/

$("#formsubmit").click(function () {
    $("#myform").hide();
    $("#myresults").text($("#mytext").val());
    $("#myresultsWrap").show();
});
$("#toform").click(function () {
    $("#myresultsWrap").hide();
    $("#myform").show();
});

当然你可以让它变得更漂亮，添加你自己的数据，如果用户回到它可能会清除表格等等，但这应该给你的想法。

Answer 2

如果不重新加载，则无法恢复到以前的HTML状态。但是，您可以执行的操作与替换表单时的操作相同。只有这次你用原始表格替换结果。您可以选择在代码的该部分中再次添加相同的表单代码，或者您可以保存quizgenerator元素的innerHTML，将其保存在变量中并在您要“重置”时将其放回。

重置innerHTML没有重新加载页面

2 个答案: