คุณสมบัติชื่อปุ่ม HTML DOM เชื่อมโยงกับแอตทริบิวต์ชื่อขององค์ประกอบ
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์สำหรับ −
การตั้งค่าคุณสมบัติชื่อ -
buttonObject.name = name
ในที่นี้ ค่าคุณสมบัติชื่อจะใช้เพื่อแสดงชื่อของปุ่ม
ตัวอย่าง
ให้เราดูตัวอย่างคุณสมบัติชื่อปุ่ม −
<!DOCTYPE html>
<html>
<body>
<button id="button1" name="btn1">BUTTON</button>
<p>Click the button below and change the above button name.</p>
<button onclick="change()">CHANGE</button>
<p id="Sample"></p>
<script>
function change() {
document.getElementById("button1").name="SECOND BUTTON";
var x=document.getElementById("button1").name;
document.getElementById("Sample").innerHTML="The new button name is "+x;
}
</script>
</body>
</html> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
เมื่อคลิกเปลี่ยน -
ในตัวอย่างข้างต้น −
ขั้นแรกเราได้สร้างปุ่มที่มีรหัส “button1” และชื่อ “btn1”
<button id="Button1">BUTTON</button>
เราได้สร้างปุ่ม CHANGE ที่รันเมธอด change() เมื่อคลิก
<button onclick="change()">CHANGE</button>
ฟังก์ชัน change() รับองค์ประกอบปุ่มที่มีรหัส "button1" และเปลี่ยนค่าแอตทริบิวต์ชื่อเป็น "ปุ่มที่สอง" ค่าชื่อของปุ่มจะถูกกำหนดให้กับตัวแปร x และสุดท้ายจะแสดงในย่อหน้าที่มีรหัส “Sample”
function change() {
document.getElementById("button1").name="SECOND BUTTON";
var x=document.getElementById("button1").name;
document.getElementById("Sample").innerHTML="The new button name is "+x;
} 