如何使用 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+ 次瀏覽

啟動您的職業生涯

完成課程後獲得認證

開始學習
廣告
© . All rights reserved.