คุณสมบัติประเภทช่วงอินพุต HTML DOM

คุณสมบัติประเภทช่วงอินพุต HTML DOM เชื่อมโยงกับองค์ประกอบอินพุตที่มีประเภท =” ช่วง” มันจะคืนค่าช่วงสำหรับองค์ประกอบช่วงอินพุตเสมอ

ไวยากรณ์

ต่อไปนี้เป็นไวยากรณ์สำหรับคุณสมบัติประเภทช่วง -

rangeObject.type

ตัวอย่าง

ให้เราดูตัวอย่างคุณสมบัติประเภทช่วง -

<!DOCTYPE html>
<html>
<body>
<h1>Input range type Property</h1>
<form>
VOLUME <input type="range" id="RANGE1" name="VOL">
</form>
<p>Get the above input element type by clicking the below button</p>
<button type="button" onclick="rangeType()">GET Type</button>
<p id="Sample"></p>
<script>
   function rangeType() {
      var P=document.getElementById("RANGE1").type;
      document.getElementById("Sample").innerHTML = "The type for the input field is: "+P ;
   }
</script>
</body>
</html>

ผลลัพธ์

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

คุณสมบัติประเภทช่วงอินพุต HTML DOM

เมื่อคลิกวิธี GET Type -

คุณสมบัติประเภทช่วงอินพุต HTML DOM

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

เราได้สร้างช่องใส่ข้อมูลที่อยู่ภายในแบบฟอร์มที่มีประเภท=“ช่วง”, id=“RANGE1”, ชื่อ=“VOL” -

<form>
VOLUME <input type="range" id="RANGE1" name="VOL">
<form>

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

<button type="button" onclick="rangeType()">Get Type</button>

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

function rangeType() {
   var P = document.getElementById(“RANGE1").type;
   document.getElementById("Sample").innerHTML = "The type for the input field is : "+P;
}