如何使用JavaScript顯示用戶輸入的信息？

我有一個表格代碼將允許用戶輸入信息。我試圖使用JavaScript將這些信息的某些部分顯示到新頁面上。基本上，該頁面旨在讓用戶輸入信息並在新標籤或頁面中顯示名稱，日期，時間和電子郵件顯示。但我似乎無法顯示它。誰能幫我？如何使用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>

來源

2013-04-21 tserran

嘗試使用'document.write'以外的內容來顯示您的信息。 – 0x499602D2 2013-04-21 19:52:27

我還應該使用什麼？ – tserran 2013-04-21 20:14:04

爲輸出創建一個HTML元素並給它一個id。然後在函數中執行'document.getElementById（element_id）.innerHTML = [text]'。 – 0x499602D2 2013-04-21 20:16:03

您的代碼問題是您在動態設置中使用了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-21 22:54:00 0x499602D2

如何使用JavaScript顯示用戶輸入的信息？

回答

相關問題