Thuộc tính value của DOM Input Button trong HTML

Giới thiệu

Thuộc tính value của DOM Input Button đọc hoặc thay đổi nhãn hiển thị (và giá trị gửi đi nếu type="submit") của nút <input type="button|submit|reset|image">.

Cú pháp

// Lấy
button.value
// Gán
button.value = "van_ban_moi"

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
  <style>
    .btn { display:block; margin:1rem auto; background:#db133a; color:#fff; border:1px solid #db133a; padding:0.5rem; border-radius:50px; width:80%; }
    .show-value { font-weight:bold; font-size:1.4rem; color:#ffc107; }
  </style>
</head>
<body>
  <h1>Ví dụ value Property</h1>
  <input type="submit" onclick="setValue()" class="btn" value="Nhấn để đổi text">
  <div class="show-value"></div>
  <script>
    function setValue() {
      var btn = document.querySelector(".btn");
      document.querySelector(".show-value").innerHTML = "Value cũ = " + btn.value;
      btn.value = "Chúc mừng! Bạn đã đổi value thành công";
    }
  </script>
</body>
</html>

Kết quả hiển thị

Nhấp nút: nhãn nút đổi thành câu chúc mừng, div hiển thị value cũ.