เมื่อสร้างเพจ บางครั้งจำเป็นที่เมื่อคุณคลิกที่ปุ่มที่วางอยู่ในเพจ เหตุการณ์บางอย่างที่ตั้งโปรแกรมโดยผู้เขียนเกิดขึ้นในเบราว์เซอร์ ในการดำเนินการนี้ คุณต้องวางโค้ด JavaScript ในเอกสารที่สร้างขึ้นและผูกไว้กับปุ่มที่จำเป็น คุณสามารถใช้วิธีต่างๆ ในการเชื่อมต่อปุ่มกับโค้ดได้ ทั้งนี้ขึ้นอยู่กับจำนวนโค้ดที่ต้องใช้สำหรับเหตุการณ์ที่ต้องการ
คำแนะนำ
ขั้นตอนที่ 1
ส่วนใหญ่แล้ว การเรียกโค้ด JavaScript จะถูกผูกไว้กับเหตุการณ์ onclick นั่นคือการคลิกปุ่มซ้ายของเมาส์ หากคุณไม่ต้องการโค้ดจำนวนมากเพื่ออธิบายการดำเนินการที่จำเป็นต้องเกิดขึ้น คุณสามารถวางโค้ดทั้งหมดลงในแท็กปุ่มได้โดยตรง ตัวอย่างเช่น ในการตั้งโปรแกรมเบราว์เซอร์ให้แสดงข้อความธรรมดาเมื่อคลิกปุ่ม สคริปต์ JavaScript จะมีลักษณะดังนี้: alert ('Code works!') ใช้คำสั่งและข้อความเพียงรายการเดียว ทั้งหมดนี้สามารถวางไว้ได้อย่างง่ายดายในคำอธิบายเหตุการณ์ onclick ของแท็กปุ่ม ในกรณีนี้ โค้ด HTML ที่ง่ายที่สุดของหน้าอาจมีลักษณะดังนี้:
ปุ่มที่มีรหัส
ปุ่มที่มีรหัส
ขั้นตอนที่ 2
การวางโค้ด JavaScript ที่ซับซ้อนกว่านี้โดยตรงในแท็กปุ่มนั้นไม่สะดวก ง่ายกว่าที่จะสร้างฟังก์ชันแยกจากกัน และเรียกใช้งานในเหตุการณ์ onclick ตัวอย่างเช่น อาจดูเหมือนฟังก์ชันที่แสดงหน้าต่างที่มีเวลาของการคลิกปุ่ม: function getTime () {
var now = วันที่ใหม่ ();
alert ("รหัสใช้งานได้" + now.getHours () + ":" + now.getMinutes ());
} ควรวางไว้ในส่วนหัวของหน้า (ระหว่างแท็กและแท็ก) โค้ดทั้งหมดของเพจที่มีการเรียกใช้ฟังก์ชันนี้ผูกกับปุ่มอาจมีลักษณะดังนี้:
ปุ่มเรียกฟังก์ชัน
ฟังก์ชัน getTime () {
var now = วันที่ใหม่ ();
alert ("รหัสใช้งานได้" + now.getHours () + ":" + now.getMinutes ());
}
ปุ่มเรียกฟังก์ชัน
ขั้นตอนที่ 3
ควรใช้วิธีการเดียวกันเมื่อคลิกปุ่มต่างๆ หลายปุ่ม ทำให้เกิดเหตุการณ์ที่สามารถอธิบายได้ด้วยโค้ด JavaScript เดียวกัน ตัวอย่างเช่น คุณสามารถปรับเปลี่ยนฟังก์ชันก่อนหน้าเล็กน้อยเพื่อเพิ่มการระบุของปุ่มที่ถูกกดลงในกล่องข้อความ: function getTime (btnString) {
var now = วันที่ใหม่ ();
การแจ้งเตือน (btnString + "คลิกแล้ว" + now.getHours () + ":" + now.getMinutes ());
} โค้ดที่สมบูรณ์สำหรับหน้าเว็บที่มีปุ่มดังกล่าวสามปุ่มอาจมีลักษณะดังนี้:
สามปุ่มพร้อมการเรียกใช้ฟังก์ชัน
ฟังก์ชัน getTime (btnString) {
var now = วันที่ใหม่ ();
การแจ้งเตือน (btnString + "คลิกแล้ว" + now.getHours () + ":" + now.getMinutes ());
}
ปุ่มแรก
ปุ่มที่สอง
ปุ่มที่สาม