📌  相关文章
📜  在按钮单击反应时获取输入元素的值 - Javascript(1)

📅  最后修改于: 2023-12-03 15:08:02.437000             🧑  作者: Mango

在按钮单击反应时获取输入元素的值 - Javascript

在Web开发中,我们经常需要获取用户输入的值。而获取这些值的方法就是通过JavaScript来获取。本文将介绍如何在按钮单击反应时获取输入元素的值。

HTML

首先,我们需要创建一个HTML文件来包含输入元素和按钮。下面是一个简单的HTML文件,其中包含一个文本框和一个按钮:

<!DOCTYPE html>
<html>
   <head>
      <title>Get Input Value</title>
      <script src="app.js"></script>
   </head>
   <body>
      <input type="text" id="inputField">
      <button onclick="getValue()">Get Value</button>
   </body>
</html>

在这个HTML文件中,我们定义了一个文本框和一个按钮。文本框的ID是“inputField”,并且我们将按钮的单击事件绑定到一个名为“getValue”的JavaScript函数。

JavaScript

接下来,我们需要在JavaScript中编写代码来获取文本框中输入的值。在这个例子中,我们将使用getElementById函数来获取文本框元素,并使用value属性来获取输入的值。我们将这些代码定义在一个名为“getValue”的函数中:

function getValue() {
   var inputField = document.getElementById("inputField");
   var inputValue = inputField.value;
   alert(inputValue);
}

在这个代码片段中,我们首先使用getElementById函数获取文本框元素。然后,我们使用value属性获取输入的值,并将其保存在一个名为“inputValue”的变量中。最后,我们使用alert函数显示输入的值。

结论

现在,当用户单击按钮时,我们将能够获取输入的值并将其显示在一个弹出框中。这段代码非常简单,但它演示了如何使用JavaScript来获取输入元素的值。希望这篇文章能帮助您学习如何在JavaScript中获取用户输入的值。

参考
  1. How to get the value of a form element using JavaScript?