如何使用 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 属性内给定的值相同的 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+ 浏览量

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告