HTML DOM Button value屬性用法及代碼示例

HTML DOM Button value 屬性與 <button> 元素的 value 屬性相關聯。它指定按鈕的隱藏值。 value 屬性設置或返回按鈕的 value 屬性的值。瀏覽器通常在單擊按鈕時提交值文本，而其他瀏覽器則提交 <button> 元素之間的文本。

用法

以下是語法 -

設置值屬性 -

buttonObject.value = text

此處，文本屬性值是賦予按鈕的初始值。

示例

讓我們看一個按鈕值屬性的例子 -

<!DOCTYPE html>
<html>
<body>
<button id="Button1" name="random" value="FirstButton">My Button</button>
<p>Click on the below button to change the above button value</p>
<button onclick="changeFunc()">CHANGE</button>
<p id="Sample"></p>
<script>
   function changeFunc() {
      document.getElementById("Button1").value = "SecondButton";
      var x=document.getElementById("Button1").value;
      document.getElementById("Sample").innerHTML="The button value is now "+x;
   }
</script>
</body>
</html>

輸出

這將產生以下輸出 -

單擊更改 -

我們首先創建了一個按鈕，其值為 “FirstButton”，id 為 “button1”。

<button id="Button1" name="random" value="FirstButton">My Button</button>

然後我們創建了一個按鈕 CHANGE，它將在單擊時執行 changeFunc()。

<button onclick="changeFunc()">CHANGE</button>

changeFunc() 方法將使用其 id “Button1” 獲取第一個按鈕元素，並將其值從 “FirstButton” 更改為 “SecondButton”。然後將新更改的按鈕值分配給變量 x 並顯示在 ID 為 “Sample” 的段落內。

function changeFunc() {
   document.getElementById("Button1").value = "SecondButton";
   var x=document.getElementById("Button1").value;
   document.getElementById("Sample").innerHTML="The button value is now "+x;
}

相關用法

注：本文由純淨天空篩選整理自AmitDiwan大神的英文原創作品 HTML DOM Button value Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。