如何使用 JavaScript 获取按钮的值？

在本教程中，我们将学习如何使用JavaScript查找按钮的值。有时，我们需要在表单标签内使用按钮标签，并为每个与<form> 元素关联的按钮分配一个独特的value属性值。这随后帮助开发者在后端处理元素时唯一地识别它们。JavaScript 提供了value 属性来获取在value 属性内传递的值。

让我们详细讨论一下value 属性。

按钮 value 属性

按钮的value 属性用于获取按钮的value 属性的值。

语法

以下是获取按钮value 属性值的语法。

let varName = document.getElementById("id").value;

步骤

  • 步骤 1 − 我们首先在表单内创建一个带有与value 属性关联的值的按钮。
  • 步骤 2 − 接下来，我们使用其 ID 找到按钮元素，并使用value 属性获取value 属性的值。
  • 步骤 3 − 在最后一步，我们将从value 属性中提取的值显示在用户屏幕上。

让我们通过一些编程示例来理解它。

示例 1

下面的示例将说明如何使用value 属性获取按钮的value 属性的值。

<html>
<body>
   <h3>Find the value of a button</h3>
   <form>
      <button type="submit" id="btn" value="submit_button">click me!</button>
   </form>
   <p id="result"></p>
   <script>
      let btn = document.getElementById("btn");
      let val = btn.value;
      document.getElementById("result").innerHTML = "Value of the above button: <b>" + val + "</b>";
   </script>
</body>
</html>

在这个示例中，我们看到了如何使用value 属性来获取按钮内部的值。首先，我们使用其 ID `btn` 获取目标元素，然后在其上使用value 属性来获取其内部 value 属性的值。

让我们讨论另一个示例，我们将使用 JavaScript 动态地将与value 属性内给出的值相同的赋值给按钮标签。

  • 步骤 1 − 在此步骤中，我们将定义一个按钮标签，其中不包含任何文本，但具有与特定值关联的 value 属性。
  • 步骤 2 − 在第二步中，我们将使用其 ID 获取元素，使用value 属性获取value 属性的值，然后使用 JavaScript 的innerHTML 或innerText 属性将相同的值赋给按钮文本。
  • 步骤 3 − 在第三步中，我们将显示value 属性的值，并将其与按钮标签的文本进行匹配以确认赋值。

示例 2

下面的示例将解释如何使用value 属性将按钮的内部文本动态设置为与value 属性的值相同。

<html>
<body>
   <h3>Find the value of a button with JavaScript</h3>
   <form>
      <button type="submit" id="btn" value="Submit_button">Submit_button</button>
   </form>
   <p id="result"></p>
   <script>
      let btn = document.getElementById("btn");
      let val = btn.value;
      btn.innerHTML = val;
      document.getElementById("result").innerHTML = "Value of the button: <b>" + val + "</b>";
   </script>
</body>
</html>

在上面的示例中，我们看到了如何使用 JavaScript 的value 属性动态地将按钮的文本设置为与value 属性的值相同。在这个示例中，在获取元素后，我们将值存储在一个特定变量中，然后使用 JavaScript 的innerHTML 属性将该值作为按钮的文本。

让我们再讨论一个示例，我们将把按钮的已给定文本更改为value 属性的值。

  • 步骤 1 − 在此步骤中，我们将定义一个按钮标签，其中包含文本，并且还具有与特定值关联的value 属性。
  • 步骤 2 − 在第二步中，我们将使用其 ID 获取元素，使用value 属性获取value 属性的值，然后使用 JavaScript 的innerHTML 或innerText 属性将我们获得的值更新为按钮标签的文本。
  • 步骤 3 − 在第三步中，我们将显示value 属性的值，并将其与按钮标签的更新文本进行匹配，以确认代码是否有效。

示例 3

下面的示例将说明如何使用value 属性通过单击按钮来更改按钮标签的文本。

<html>
<body>
   <h3>Find the value of a button with JavaScript</h3>
   <form>
      <button type="submit" id="btn" value="Submit"
      onclick="display(event)">click to change the text!</button>
   </form>
   <p id="result"></p>
   <script>
      let btn = document.getElementById("btn");
      let val = btn.value;
      function display(event) {
         event.preventDefault();
         btn.innerHTML = val;
      }
      document.getElementById("result").innerHTML = "The value of the button: <b>" + val + "</b>";
   </script>
</body>
</html>

在上面的示例中，如果您单击点击更改文本！按钮，它会自动将按钮的文本更改为按钮标签value 属性内的值。

在本教程中，我们讨论了 JavaScript 的value 属性，该属性用于获取任何 HTML 标签内value 属性的值。我们还学习了如何使用value 属性动态地将按钮标签内的文本更改为value 属性的值。我们可以使用上面讨论的方法更改任何标签的文本。

更新于：2023年10月21日

29K+ 次浏览

启动您的职业生涯

完成课程后获得认证

开始学习
广告