HTML DOM Input Number value คุณสมบัติ

คุณสมบัติค่าตัวเลข HTML DOM Input เชื่อมโยงกับองค์ประกอบอินพุตที่มี type=”Number” และมีแอตทริบิวต์ค่า คุณสมบัตินี้ใช้สำหรับส่งคืนค่าของแอตทริบิวต์ค่าองค์ประกอบอินพุตหรือเพื่อตั้งค่า คุณสมบัตินี้ใช้สำหรับระบุค่าเริ่มต้นสำหรับองค์ประกอบและยังเปลี่ยนค่าเป็นอินพุตของผู้ใช้

ไวยากรณ์

ต่อไปนี้เป็นไวยากรณ์สำหรับ −

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

numberObject.value = number;

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

ตัวอย่าง

ให้เราดูตัวอย่างสำหรับการป้อนคุณสมบัติค่าตัวเลข -

<!DOCTYPE html>
<html>
<body>
<h1>Input Number Value property</h1>
PHONE NO: <input type="number" value="222" id="NUMBER1">
<p>Get the above element value by clicking the below button</p>
<button onclick="getValue()">Get Value</button>
<p id="Sample"></p>
<script>
   function getValue() {
      var t = document.getElementById("NUMBER1").value;
      document.getElementById("Sample").innerHTML = "The value for the input field is : "+t;
   }
</script>
</body>
</html>

ผลลัพธ์

สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -

HTML DOM Input Number value คุณสมบัติ

เมื่อคลิกปุ่ม "รับค่า" -

HTML DOM Input Number value คุณสมบัติ

ในตัวอย่างข้างต้น −

เราได้สร้างช่องป้อนข้อมูลที่มีหมายเลขประเภทและตั้งค่ารหัสเป็น "NUMBER1" เราได้ระบุค่าเริ่มต้นสำหรับฟิลด์ตัวเลขโดยใช้แอตทริบิวต์ค่า

PHONE NO: <input type="number" value="222" id="NUMBER1">

เราได้สร้างปุ่ม "รับค่า" ที่จะรันเมธอด getValue() เมื่อผู้ใช้คลิก -

<button onclick="getValue()">Get Value</button>

getValue() รับองค์ประกอบอินพุตโดยใช้เมธอด getElementById() และกำหนดค่าแอตทริบิวต์ "value" ให้กับตัวแปร t ตัวแปรนี้จะแสดงในย่อหน้าด้วย id “Sample” โดยใช้คุณสมบัติ innerHTML -

function getValue() {
   var t = document.getElementById("NUMBER1").value;
   document.getElementById("Sample").innerHTML = "The value for the input field is : "+t;
}