0

ユーザーが情報を入力できるようにするフォームコードがあります。JavaScriptを使用して、その情報の特定の部分を新しいページに表示しようとしています。基本的に、このページはユーザーに情報を入力させ、名前、日付、時刻、および電子メールを新しいタブまたはページに表示させることを目的としています。しかし、私はそれを表示することができないようです。誰でも私を助けることができますか？

<html lang="en" >
    <head>
    <title>Shy Music Booking Confirmation</title>
    <link rel="stylesheet" href="music.css" type="text/css" />

<body>
<div id="wrapper">
<div id="form">
    <header><h1>Shy Music Private Lessons</h1></header>

<script type="text/javascript">

      function addtext()
      {
         var userName = document.booking.userName.value;
         var userDate = document.booking.userDate.value;
         var userTime = document.booking.userTime.value;
         var userEmail = document.booking.userEmail.value;

         document.writeln("Thank you! You have just entered the following:");
         document.writeln("<pre>");
         document.writeln("Name: " + userName);
         document.writeln("Date: " + userDate);
         document.writeln("Time: " + userTime);
      }
    </script>
</head>
<hr>
<form name="booking">
<h1>Book a Slot Here!</h1>
    <label for="userName">Name: <br><input type = "text" name = "userName"></label>      <br><br>
    <label for="userEmail">E-mail Address: <br><input type = "email" name = "userEmail"></label><br><br>
<label for="userPhone">Phone Number: <br><input type = "tel" name = "userPhone">    </label><br><br>
<label for="userInstrument">Instrument: 
<select>
<option>Guitar</option>
<option>Drums</option>
<option>Piano</option>
</select>
</label>
<br><br>
<label for="userTime">
Preffered Time: 
<select>
<option>9:00</option>
<option>9:30</option>
<option>10:00</option>
<option>10:30</option>
<option>11:00</option>
<option>11:30</option>
<option>12:00</option>
<option>12:30</option>
<option>1:00</option>
<option>1:30</option>
<option>2:00</option>
<option>2:30</option>
<option>3:00</option>
<option>3:30</option>
<option>4:00</option>
<option>4:30</option>
</select>
</label>
<select>
<option>AM</option>
<option>PM</option>
</select>
<br>
<br>
    <label for="userDate">Date: <br><input type = "date" name = "userDate"></label><br><br>

<input type="submit" value="Submit" >
<form action="#">
<input type="button" value = "Back" onclick="javascript:history.go(-1)" />
</form>
</form>
</div>
</div>
</body>
</html>
4

2 に答える 2

0

コードの問題はdocument.write、動的設定で使用していたことです。このコンテキストで使用するとdocument.write、現在のドキュメントのコンテンツが消去され、パラメータで指定されたテキストに置き換えられます。このため、document.write一般的に、テキスト/データを表現および挿入する方法としては貧弱であると見なされています。そして、それは通常、JavaScript を学習する多くの初心者に影響を与えます。覚えておくべきいくつかの代替手段を次に示します。

  • element.innerHTML：コメントで言ったように。.innerHTMLページ上の要素を介して、書式設定された HTML をドキュメントに挿入するために使用します。id必ずしも属性で指定する必要はありません。それは、要素取得の他の形式によって非常によく与えられます。

  • node.appendChild: この方法は、最初の方法よりも DOM に適しています。で指定された要素の本体の最後にノードを挿入できますnode。例えば：

    var form = document.myForm,
    new_element = document.createElement('input');

new_element.type = "button";
new_element.value = "Submit";

form.appendChild( new_element );

これが役に立ったことを願っています。

于 2013-04-21T22:54:00.450 に答える