นักพัฒนาส่วนใหญ่ต้องการให้หน้าเว็บของพวกเขาน่าสนใจและทำให้พวกเขาโต้ตอบได้ เพื่อจุดประสงค์นี้ ปุ่มต่างๆ จะถูกเพิ่มลงในหน้าเว็บ ตัวอย่างเช่น เมื่อมีความจำเป็นต้องส่งหรือรับข้อมูล รวมถึงเหตุการณ์การคลิกเพื่อเพิ่มฟังก์ชันให้กับผู้ใช้ในขณะที่ลงทะเบียนหรือลงชื่อเข้าใช้บัญชี ในกรณีเช่นนี้ ปุ่มต่างๆ จะทำให้ผู้ใช้ปลายทางสามารถใช้งานฟังก์ชันต่างๆ ได้อย่างชาญฉลาด
บล็อกนี้จะอธิบายวิธีการสร้างปุ่มใน JavaScript
จะสร้างปุ่มใน JavaScript ได้อย่างไร?
ในการสร้างปุ่มใน JavaScript สามารถใช้วิธีการต่อไปนี้:
วิธีการต่อไปนี้จะสาธิตแนวคิดทีละรายการ!
วิธีที่ 1: สร้างปุ่มใน JavaScript โดยใช้เมธอด “createElement()” และ “appendChild()”
“ createElement() ” วิธีการสร้างองค์ประกอบและ “ ผนวกเด็ก() ” วิธีผนวกองค์ประกอบเข้ากับลูกสุดท้ายขององค์ประกอบ เมธอดเหล่านี้จะถูกนำมาใช้ในการสร้างปุ่มและผนวกเข้ากับ Document Object Model (DOM) ที่จำเป็นต้องใช้ตามลำดับ
ไวยากรณ์
เอกสาร. createElement ( พิมพ์ )ธาตุ. ผนวกเด็ก ( โหนด )
ในไวยากรณ์ข้างต้น “ พิมพ์ ” หมายถึงประเภทขององค์ประกอบที่จะถูกสร้างขึ้นโดยใช้เมธอด createElement() และ “ โหนด ” เป็นโหนดที่จะต่อท้ายด้วยความช่วยเหลือของเมธอด appendChild()
ตัวอย่างต่อไปนี้จะอธิบายแนวคิดที่ระบุไว้
ตัวอย่าง
ประการแรก “ ปุ่ม ” จะถูกสร้างขึ้นโดยใช้เมธอด document.createElement() และเก็บไว้ในตัวแปรชื่อ “ createButton ”:
const createButton = เอกสาร. createElement ( 'ปุ่ม' )ต่อไป “ innerText ” คุณสมบัติจะอ้างอิงถึงปุ่มที่สร้างขึ้นและตั้งค่าข้อความของปุ่มที่ระบุดังนี้:
สร้างปุ่ม innerText = 'คลิก_ฉัน'สุดท้ายนี้ “ ผนวกเด็ก() ” จะผนวกปุ่มที่สร้างต่อ DOM โดยอ้างถึงตัวแปรที่มันถูกเก็บไว้เป็นอาร์กิวเมนต์:
เอกสาร. ร่างกาย . ผนวกเด็ก ( createButton ) ;ผลลัพธ์ของการดำเนินการข้างต้นจะส่งผลดังนี้:
วิธีที่ 2: สร้างปุ่มใน JavaScript โดยใช้แอตทริบิวต์ 'ประเภท' ของแท็ก 'อินพุต'
“ พิมพ์ ” แสดงถึงประเภทขององค์ประกอบอินพุตที่จะแสดง สามารถใช้สร้างปุ่มได้โดยระบุ “ ปุ่ม ” เป็นค่าของแอตทริบิวต์ type ของแท็กอินพุต
ไวยากรณ์
< ประเภทอินพุต = 'ปุ่ม' >ที่นี่, ' ปุ่ม ” ระบุประเภทของช่องป้อนข้อมูล
ดูตัวอย่างด้านล่าง
ตัวอย่าง
อันดับแรก เราจะใช้ input tag โดยระบุประเภทเป็น “ ปุ่ม ” และให้ค่าเป็น “ Click_Me ” เป็นผลให้ปุ่มจะถูกสร้างขึ้น นอกจากนี้ มันจะเรียก “ createButton() ” เมื่อคลิก:
< ประเภทอินพุต = ค่าปุ่ม = Click_Me onclick = 'createButton()' >ในไฟล์ JavaScript เราจะกำหนด “ createButton() ” ซึ่งจะสร้างกล่องแจ้งเตือนเมื่อมีการคลิกปุ่มที่เพิ่มเข้ามา:
การทำงาน createButton ( ) {เตือน ( “นี่คือปุ่ม” )
}
เอาท์พุต
เทคนิคที่กล่าวถึงในการสร้างปุ่มใน JavaScript สามารถใช้งานได้อย่างเหมาะสมตามความต้องการ
บทสรุป
ในการสร้างปุ่มใน JavaScript “ createElement() ' และ ' ผนวกเด็ก() สามารถใช้เมธอด ” เพื่อสร้างปุ่มและต่อท้ายปุ่มเพื่อใช้ใน DOM เทคนิคอื่นที่สามารถใช้เพื่อสร้างปุ่มได้คือการกำหนดประเภทอินพุตและเพิ่มฟังก์ชันที่เกี่ยวข้อง บทความนี้สาธิตวิธีการสร้างปุ่มใน JavaScript