คุณสมบัติ value ของ Input Number ใน HTML DOM

คุณสมบัติ value ของ Input Number ใน HTML DOM เกี่ยวข้องกับองค์ประกอบ input ที่มี type="number" และมีแอตทริบิวต์ value ใช้สำหรับคืนค่าหรือตั้งค่าแอตทริบิวต์ value ของช่องป้อนตัวเลข ใช้ระบุค่าเริ่มต้น (default value) และจะเปลี่ยนตามค่าที่ผู้ใช้ป้อน

ไวยากรณ์ (Syntax)

การตั้งค่าคุณสมบัติ value:

numberObject.value = number

number ระบุค่าสำหรับช่องตัวเลข

ตัวอย่าง

ตัวอย่างการดึงค่าของช่องป้อนตัวเลข:

<!DOCTYPE html>
<html>
<body>
<h1>คุณสมบัติ value ของ Input Number</h1>
PHONE NO: <input type="number" value="222" id="NUMBER1">
<p>คลิกปุ่มด้านล่างเพื่อดูค่าของช่องป้อนข้อมูลข้างบน</p>
<button onclick="getValue()">Get Value</button>
<p id="Sample"></p>
<script>
  function getValue() {
    var val = document.getElementById("NUMBER1").value;
    document.getElementById("Sample").innerHTML = "ค่าของช่องป้อนข้อมูลคือ: " + val;
  }
</script>
</body>
</html>

ผลลัพธ์

เมื่อโหลดหน้าเว็บจะแสดงช่องป้อนตัวเลขมีค่าเริ่มต้น 222 และปุ่ม "Get Value"

เมื่อคลิกปุ่ม "Get Value" จะแสดง "ค่าของช่องป้อนข้อมูลคือ: 222" (หรือค่าที่ผู้ใช้เปลี่ยนไป)

คำอธิบายโค้ด

• สร้างช่องป้อนตัวเลข type="number" id="NUMBER1" มี value="222" เป็นค่าเริ่มต้น
• สร้างปุ่ม "Get Value" เรียกใช้ getValue() เมื่อคลิก
• ฟังก์ชัน getValue() ดึงช่องป้อนด้วย getElementById("NUMBER1") อ่าน .value เก็บใน val
• แสดงผลในย่อหน้า id="Sample"