2

我写了一个小性格测验。从下拉菜单中选择答案并提交表单 ( 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 部分？

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

4

2 回答 2

1

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

http://jsfiddle.net/Bk8rH/

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

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

于 2013-04-15T18:55:17.980 回答
0

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

于 2013-04-15T18:38:38.573 回答