3

私の名前はマイケル・トスカーノです。私は現在、学校向けの 3 層プロジェクトに取り組んでいますが、些細なステップと思われるものに行き詰まっています。現在、あるボタンをクリックすると個々の HTML フォームが非表示になり、別のボタンをクリックすると表示されるようにしようとしています。HTML ページには 2 つのフォームしかありません。2 番目のフォームを非表示にしようとすると機能しますが、最初のフォームのみを非表示にしようとすると、ページの上部にある 2 つのボタン (両方のフォーム) を除いて、ページ全体が非表示になります。誤って最初のフォーム内に 2 番目のフォームを配置した可能性があると思いましたが (可能であれば)、コードを調べたところ、(少なくとも私には) 最初のフォームを で終了したように見えます。とにかく、HTMLファイル全体は次のとおりです。

    <!DOCTYPE html>
    <html><head>

    <button type=button id=f1 onclick="func(1)">Order Form</button>
    <button type=button id=f2 onclick="func(2)">Retrieval Form</button>

    <script type="text/javascript">
    function func(a) {
        if(a==1) {
            document.getElementById("order").style.display="none";
        }
        if(a==2) {
            document.getElementById("order").style.display="block";
        }
    }
    </script>

    <script type="text/javascript">
        function showValue(newValue)
        {
            document.getElementById("range").innerHTML=newValue;
        }
    </script>
    </head>

   <body> 
<form id=order action=form.php >

    <p><center>Name: <input type=text
        name="name"
        placeholder="Enter Your Name"
        required
        autocomplete="on"></center><br>

    <center>Email: <input type=text
        name="email"
        placeholder="Enter Your Email"
        required
        autocomplete="off"></center><br>

    <center>Password: <input type=text
        name="password"
        placeholder="15 Characters Or Less"
        required
        autocomplete="off"></center><br>

    <center>Address: <input type=text
        name="address"
        placeholder="Enter Your Address"
        required
        autocomplete="off"></center><br>

    <center>Laptops: <input type=range 
        name=laptop 
        value=0 
        min=0 
        max=10 
        onChange="showValue(this.value)">

    <center>Monitors: <input type=range 
        name=monitor 
        value=0 
        min=0 
        max=10 
        onChange="showValue(this.value)">

    <center>Mouses: <input type=range 
            name=mouse  
        value=0 
        min=0 
        max=10 
        onChange="showValue(this.value)">

    <center>Keyboards: <input type=range
        name=keyboard
        value=0
        min=0
        max=10
        onChange="showValue(this.value)">

    <br>
    <br>

    <center>Shipping Carrier: <SELECT name="delivery">
        <option value="fedex">FEDEX</option>
        <option value="ups">UPS</option>
    </SELECT></center>

    <br>

    <center>Would you like an email receipt?<br>
    <center>Yes <input type="radio" name="group1" value=1> No
    <input type="radio" name="group1" value=0 checked></center><br>

    <br>

    <center><input type=submit value="Submit Order"></center></p>

    </form>

    <form id=retrieve action=form2.php>

    First Name: <input type=text name=first><br>
    Last Name: <input type=text name=last><br>
    Password: <input type=password name=p1><br>
    Retype Password: <input type=password name=p2><br>
    <input type=submit>

    </form>
</body>
</html>

私は HTML と JavaScript にかなり慣れていないことを指摘しておきたいので、誰かの回答に簡単な説明を添えていただければ幸いです。よろしくお願いします。

4

3 に答える 3

3

最初に、ボタンをドキュメント本文に移動する必要があります

その後、関数を少し良くすることができます。

//names of functions as well as attributes should describe them
function show(elementId) { 
  //now we kick out both conditional we do not need them anymore

  //we hide both forms
  document.getElementById("order").style.display="none";
  document.getElementById("retrieve").style.display="none";

  //and then we simply show wanted one isn't that nicer and cleaner?
  document.getElementById(elementId).style.display="block";
}

関数ができたら、それをボタンに適用できます

<button type="button" onclick="show('order');">Order Form</button>
<button type="button" onclick="show('retrieve');">Retrieval Form</button>

ご覧のとおり、それらの ID は不要であるため削除し、属性を引用符で囲みました。これは head 要素ではなく body 要素に移動する必要があります!

このスタイルのブロックの代わりに:

<p><center>Name: <input type=text
name="name"
placeholder="Enter Your Name"
required
autocomplete="on"></center><br>

次のように、より良い方法で行うことができます。

<p style="text-align:center"><input type="text"
  name="name"
  placeholder="Enter Your Name"
  required="required"
  autocomplete="on" />
</p>

(はい、すべての行が新しい段落なので、BR タグを使用する必要はありません)

于 2013-04-05T19:11:03.650 に答える