Question

所以我有一个有表格的网页。表单链接到switch语句，并根据用户输入的内容返回一些值。但是，在返回值之后，我想提供一个选项来返回原始表单而不刷新页面。由于javascript是所有客户端，数据在我指定的div中呈现，我基本上只想通过添加按钮将该区域刷新回原始表单。在我的switch语句中，我尝试了appendeding，style.display，甚至编写了一个toggle函数，但它无效。

这是我的HTML和JS：

function verifyPres(form) {
var president = form.day.value.toUpperCase();

switch (president) {
    case "GEORGE WASHINGTON":
        document.getElementById("form").remove();
        document.getElementById("id1").textContent=george[0];
        document.getElementById("id2").textContent=george[1];
        document.getElementById("id3").textContent=george[2];
        document.getElementById("id4").textContent=george[3];
        document.getElementById("id5").textContent=george[4];
        document.getElementById("id6").textContent=george[5];
        document.getElementById("id7").textContent=george[6];
        document.getElementById("id8").textContent=george[7];
        break;
    case "JOHN ADAMS":
        document.getElementById("form").remove();
        document.getElementById("id1").textContent=adams[0];
        document.getElementById("id2").textContent=adams[1];
        break;
    default:
        document.getElementById("form").remove();
        document.getElementById("id1").textContent='Sorry, that is not a president!';
}

}

<div class="recipe">
                <form id="form" name="myForm">
                    <b>Please enter your favorite US President:</b><br>
                      <div id="input"><input type=TEXT value="" name="day" style="font-family: 'abraham_lincolnregular'; font-size: 1.2em; color: #544841;"></div>
                      <div id="return"></div>
                      <div id="ticket"><input class="button" type=BUTTON value="" name="myButton" onClick='verifyPres(this.form)'></div>
                </form>
                <h3 id="id1"></h3>
                <div id="list">
                    <div id="id2"><p></p></div>
                    <div id="id3"><p></p></div>
                    <div id="id4"><p></p></div>
                </div><!--list-->
                <div id="id5"><p></p></div>
                <div id="id6"><p></p></div>
                <div id="id7"><p></p></div>
                <div id="id8"><p></p></div>
            </div><!--recipe-->

Answer 1

你试过.reset（）吗？

document.getElementById("form").reset();

我强烈建议，如果要经常访问和操作这些元素，您可以将它们缓存到变量中，这些都是这样的：

var id1, id2, id3, id4, id5, id6, id7, id8;
id1 = document.getElementById("id1");
id2 = document.getElementById("id2");
// etc...

这样，他们就可以随时随地操作，而不必每次都强制DOM找到它们。

Answer 2

您已使用此行

删除了表单

     document.getElementById("form").remove();

删除节点后，您无法将其返回到文档

因此，如果要重新显示它，则不应将其删除！ ..所以尽量隐藏它不要删除它。

你可以用css更改隐藏...并且肯定你可以使用jQuery＆gt;＆gt;有很好的方法在它。

您的代码将被更改＆gt;＆gt;在html代码中添加此刷新按钮

 <button onclick="resetForm()">refresh</button>

，javascript代码为：

   function resetForm()
   {
        document.getElementById("form").style.display="inline";
   }
   function verifyPres(form) {
    var president = form.day.value.toUpperCase();

    switch (president) {
       case "GEORGE WASHINGTON":
       document.getElementById("form").style.display="none";
       document.getElementById("id1").textContent=george[0];
       document.getElementById("id2").textContent=george[1];
       document.getElementById("id3").textContent=george[2];
       document.getElementById("id4").textContent=george[3];
       document.getElementById("id5").textContent=george[4];
       document.getElementById("id6").textContent=george[5];
       document.getElementById("id7").textContent=george[6];
       document.getElementById("id8").textContent=george[7];
       break;
       case "JOHN ADAMS":
       document.getElementById("form").style.display="none";
       document.getElementById("id1").textContent=adams[0];
       document.getElementById("id2").textContent=adams[1];
       break;
       default:
       document.getElementById("form").style.display="none";
       document.getElementById("id1").textContent='Sorry, that is not a president!';
    }
   }

不要忘记在刷新功能中清空＃id1，id2，...

如何在switch语句后刷新表单

2 个答案: