ปุ่มในหน้าเว็บใช้เพื่อมอบประสบการณ์ผู้ใช้แบบโต้ตอบ ตามกฎแล้ว หากการตอบสนองต่อการคลิกปุ่มไม่จำเป็นต้องส่งข้อมูลไปยังเซิร์ฟเวอร์ การโต้ตอบจะดำเนินการโดยใช้สคริปต์ JavaScript วิธีการเรียกใช้โค้ด JavaScript ที่เกี่ยวข้องอาจแตกต่างกัน - ด้านล่างนี้คือตัวเลือกที่เป็นไปได้หลายประการสำหรับปุ่มประเภทต่างๆ
คำแนะนำ
ขั้นตอนที่ 1
หากการแสดงปุ่มในหน้าเว็บได้รับการจัดระเบียบโดยใช้แท็กปุ่ม โค้ด JavaScript ก็สามารถวางลงในแอตทริบิวต์ onclick ได้ ตัวอย่างเช่น เช่นนี้: ปุ่ม แน่นอนว่าไม่แนะนำให้ใส่โค้ดที่มีขนาดใหญ่พอลงในแท็กปุ่มโดยตรง - เป็นการดีกว่าที่จะออกแบบให้เป็นฟังก์ชัน และใส่เฉพาะโค้ดสำหรับการเรียกใช้ฟังก์ชันนี้ในแอตทริบิวต์ onclick ตัวอย่างเช่น:
ฟังก์ชั่น showAlert () {
การแจ้งเตือน ('คลิกปุ่มแล้ว!')
}
ปุ่ม
ขั้นตอนที่ 2
หากปุ่มแสดงผ่านรูปแบบแท็กอินพุตรูปแบบใดรูปแบบหนึ่ง (ส่ง รีเซ็ต ปุ่ม หรือรูปภาพ) คุณสามารถใช้แอตทริบิวต์ onclick เดียวกันได้ ตัวอย่างเช่น สำหรับปุ่มเพื่อล้างฟิลด์แบบฟอร์ม (รีเซ็ต) โค้ดอาจมีลักษณะดังนี้: หากคุณต้องการให้เรียกใช้งาน JavaScript เท่านั้นเมื่อคลิกปุ่ม และการดำเนินการเริ่มต้นไม่เกิดขึ้น ให้เพิ่มคำสั่ง return ไปที่ ฟังก์ชันหรือโดยตรงกับแอตทริบิวต์ onclick false ตัวอย่างเช่น:
ขั้นตอนที่ 3
หากคุณต้องการจัดระเบียบการตอบสนองต่อการคลิกปุ่มของประเภทการส่ง นอกเหนือจากวิธีการข้างต้นโดยใช้แอตทริบิวต์ onclick แล้ว คุณสามารถใช้คุณสมบัติของแท็กแบบฟอร์มที่เป็นของปุ่มนี้ได้ สามารถวางการเรียกใช้ฟังก์ชันที่เกี่ยวข้องในแอตทริบิวต์ onsubmit ของแท็กแบบฟอร์ม ตัวอย่างเช่น:
ขั้นตอนที่ 4
หากปุ่มไม่ใช่องค์ประกอบของแบบฟอร์ม แต่เป็นเพียงองค์ประกอบกราฟิก (แท็ก img) มาตรฐานสำหรับปุ่มดังกล่าวก็อนุญาตให้ใช้แอตทริบิวต์ onclick ได้ ตัวอย่างเช่น:
ขั้นตอนที่ 5
หากปุ่มเป็นไฮเปอร์ลิงก์ คุณไม่ควรใช้แอตทริบิวต์ของปุ่มเอง ควรใช้คุณสมบัติของแท็กลิงก์ คุณสามารถใช้แท็ก onclick เช่นเดียวกับในตัวเลือกก่อนหน้า ตัวอย่างเช่น: และคุณสามารถแทนที่ที่อยู่ในแอตทริบิวต์ href ด้วยการเรียกใช้ฟังก์ชัน ตัวอย่างเช่นเช่นนี้: