如何使用 JavaScript 显示用户输入的信息？

Question

I have a form code tat will allow the user to enter information.我有一个表单代码 tat 将允许用户输入信息。 I'm trying to display certain parts of that information onto a new page using javascript.我正在尝试使用 javascript 将该信息的某些部分显示到新页面上。 Basically, the page is meant to have the user enter information and have the name, date, time, and email display in a new tab or page.基本上，该页面旨在让用户输入信息并在新选项卡或页面中显示姓名、日期、时间和电子邮件。 But I can't seem to have it displayed.但我似乎无法显示它。 Can anyone help me?谁能帮我？

<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>

Answer 1

I was working on this for a lot of time, but it wasn't working.我在这方面工作了很长时间，但没有奏效。 But, I tried it recently and it worked!但是，我最近尝试过，它奏效了！ I hope this was helpful.我希望这可以帮到你。

<html>
<head>
<h1> Welcome</h1>
</head>
<body>
<p> Enter name: </p>
<input id="name" name="name"class="Name" type="text" placeholder="Enter Full name" required>`
<input type="Submit" onclick="submitted()"> <br> <br>
<a id="new" href="www.google.com"> </a>
<script>

      function submitted()
      {
        var a = document.getElementById("name").value;

        if (a=="")
        {
      document.getElementById("new").innerHTML="";
      alert("Please Enter a valid name!");
        }
        else if (a==" ") {
        document.getElementById("new").innerHTML=""
      alert("Please Enter a valid name!");
        }
        else
        {
          document.getElementById("new").innerHTML="Thank you, " + a + ". " + "Click here to continue.";
        }
      }
</script>
</body>
</html>

Or, slightly tightened, as a working snippet:或者，稍微收紧，作为一个工作片段：

 function submitted() { var a = document.getElementById("name").value.trim(); document.getElementById("new").innerHTML= a===""?"":"Thank you, " + a + ". " + "Click here to continue."; }

 <p> Enter name: </p> <input id="name" name="name"class="Name" type="text" placeholder="Enter Full name" required> <input type="Submit" onclick="submitted()"> <br> <br> <a id="new" href="www.google.com"> </a>

Answer 2

The problem with your code was that you were using document.write in a dynamic setting.您的代码的问题在于您在动态设置中使用document.write 。 When using it in this context, document.write will erase the content of the current document and replace it with the text specified by its parameters.在此上下文中使用它时， document.write将擦除当前文档的内容并用其参数指定的文本替换它。 For this reason, document.write is commonly regarded as poor way to represent and insert text/data.出于这个原因， document.write通常被认为是表示和插入文本/数据的糟糕方式。 And it typically affects the plethora of beginners learning JavaScript.它通常会影响大量学习 JavaScript 的初学者。 Here are some alternatives you should keep in mind:以下是您应该记住的一些替代方案：

element.innerHTML : Like I said in the comments. element.innerHTML ：就像我在评论中所说的那样。 Use .innerHTML to insert the formatted HTML into document through an element on the page.使用.innerHTML通过页面上的元素将格式化的 HTML 插入到文档中。 It doesn't necessarily have to be specified by an id attribute.它不一定必须由id属性指定。 It can very well be given by any other form of element obtainment.它可以很好地通过任何其他形式的元素获取来给出。
node.appendChild : This method is more DOM-friendly than the first. node.appendChild ：这个方法比第一个方法对 DOM 更友好。 It allows you to insert a node at the end of the body of the element specified by node .它允许您在 node 指定的元素主体的末尾插入一个node 。 For example:例如：
```
 var form = document.myForm, new_element = document.createElement('input'); new_element.type = "button"; new_element.value = "Submit"; form.appendChild( new_element );
```

I hope this helped.我希望这有帮助。

如何使用 JavaScript 显示用户输入的信息？

问题描述

2 个解决方案

解决方案1
2 2020-09-10 04:33:53

解决方案2
0 2013-04-21 22:54:00

如何使用 JavaScript 显示用户输入的信息？

问题描述

2 个解决方案

解决方案1 2 2020-09-10 04:33:53

解决方案2 0 2013-04-21 22:54:00

解决方案1
2 2020-09-10 04:33:53

解决方案2
0 2013-04-21 22:54:00