0

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

这是我的 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-->
4

2 回答 2

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 找到它们。

于 2013-01-31T20:09:32.207 回答
0

您已使用此行删除了表单

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

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

所以，如果你想重新显示它，你不应该删除它！..所以尽量隐藏它而不是删除它。

您可以通过更改 css 来隐藏...并且确保您可以使用 jQuery >> 里面有非常好的方法。

您的代码将被更改 >> 在 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,...

于 2013-01-31T20:35:35.283 回答