如何在 JavaScript 中获取用户输入

在 JavaScript 中，可以通过多种方式获取用户输入。下面将介绍常用的几种获取用户输入的方法。

1. 通过 prompt 方法获取用户输入

const userInput = prompt("请输入您的姓名：");
console.log(userInput);

使用 prompt 方法可以弹出一个提示框，用户可以在提示框中输入内容并点击“确定”或“取消”。如果用户点击“确定”，则该方法返回用户输入的字符串，否则返回 null。上述代码通过 prompt 方法获取用户输入的姓名，并将其打印到控制台中。

2. 通过 input 元素获取用户输入

<label for="inputName">请输入您的姓名：</label>
<input type="text" id="inputName">
<button onclick="handleClick()">确定</button>

<script>
function handleClick() {
  const userInput = document.getElementById("inputName").value;
  console.log(userInput);
}
</script>

还可以通过在 HTML 中添加一个 input 元素，用户可以在该元素中输入内容并点击“确定”按钮，然后在 JavaScript 中获取该元素的值。上述代码通过添加一个 input 元素和一个“确定”按钮，当用户点击“确定”按钮时，将通过 getElementById 方法获取 input 元素的值，并将其打印到控制台中。

3. 通过表单获取用户输入

<form onsubmit="handleSubmit(event)">
  <label for="name">请输入您的姓名：</label>
  <input type="text" id="name">
  <button type="submit">确定</button>
</form>

<script>
function handleSubmit(event) {
  event.preventDefault();
  const userInput = document.getElementById("name").value;
  console.log(userInput);
}
</script>

还可以通过添加一个表单，用户可以在表单中输入内容并点击“确定”按钮，然后在 JavaScript 中获取表单中的值。上述代码通过添加一个带有 input 元素和“确定”按钮的表单，在提交表单时，将使用 preventDefault 方法防止表单提交，然后通过 getElementById 方法获取 input 元素的值，并将其打印到控制台中。

总结

本文介绍了 JavaScript 中获取用户输入的三种方法：

1. 使用 prompt 方法。
2. 通过在 HTML 中添加 input 元素获取。
3. 通过添加表单获取。

通过这些方法，你可以方便地获取用户输入并在页面上进行处理。