获取用户的输入
在JavaScript中，获取用户输入通常涉及到HTML表单元素和JavaScript事件处理。以下是一些常见的方法来获取用户的输入：
1. 使用prompt对话框
prompt() 函数可以显示一个对话框，提示用户输入一些文本。这个对话框会返回用户输入的文本，或者如果用户取消对话框，则返回null。
1 var userName = prompt ( "Please enter your name:" );
2 if ( userName != null ) {
3 console . log ( "You entered: " + userName );
4 } 2. 使用HTML表单和按钮
可以在HTML中创建一个表单，并使用JavaScript来处理表单提交事件，从而获取用户输入的数据。
1 <!DOCTYPE html>
2 < html lang = "en" >
3 < head >
4 < meta charset = "UTF-8" >
5 < title > Get User Input</ title >
6 </ head >
7 < body >
8 < form id = "myForm" >
9 < label for = "username" > Username:</ label >
10 < input type = "text" id = "username" name = "username" >
11 < button type = "submit" > Submit</ button >
12 </ form >
13 < script >
14 document . getElementById ( 'myForm' ). addEventListener ( 'submit' , function ( event ) {
15 event . preventDefault (); // 阻止表单默认提交行为
16 var username = document . getElementById ( 'username' ). value ;
17 console . log ( 'Submitted Username:' , username );
18 alert ( 'Hello, ' + username + '!' );
19 });
20 </ script >
21 </ body >
22 </ html > 可以在HTML中放置输入元素，如<input>，然后使用JavaScript来获取这些元素的值。
1 < input type = "text" id = "userInput" >
2 < button onclick = "getInput()" > Get Input</ button >
3 < script >
4 function getInput () {
5 var value = document . getElementById ( 'userInput' ). value ;
6 console . log ( 'Input value:' , value );
7 alert ( 'You entered: ' + value );
8 }
9 </ script > HTML5引入了多种新的<input>类型，如email、number等，这些可以直接在HTML中指定，并且可以提供更丰富的用户输入验证。
1 < label for = "age" > Age:</ label >
2 < input type = "number" id = "age" >
3 < button onclick = "getAge()" > Submit Age</ button >
4 < script >
5 function getAge () {
6 var age = document . getElementById ( 'age' ). value ;
7 console . log ( 'Your age is:' , age );
8 }
9 </ script > 5. 使用addEventListener监听输入
可以监听输入字段的input或change事件，以实时获取用户的输入。
1 < input type = "text" id = "realTimeInput" >
2 < script >
3 document . getElementById ( 'realTimeInput' ). addEventListener ( 'input' , function () {
4 console . log ( 'Current input:' , this . value );
5 });
6 </ script > 这些方法提供了不同的方式来获取用户的输入，可以根据具体的需求和场景选择合适的方法。