如何使用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显示用户输入的信息？

回答

相关问题