0

だから私はフォームを持っているウェブページを持っています。フォームはswitchステートメントにリンクされており、ユーザーが入力した内容に応じて、何らかの値を返します。ただし、値が返された後、ページを更新せずに元のフォームに戻るオプションを提供したいと思います。javascriptはすべてクライアント側であるため、データは指定したdivでレンダリングされます。基本的には、ボタンを追加してその領域を元のフォームに更新したいだけです。私のswitchステートメントでは、adding、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 に答える