home

หน้าแรก
 Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> Javascript

JavaScript Onclick:คำแนะนำทีละขั้นตอน

เหตุการณ์ onclick ของ JavaScript เรียกใช้ฟังก์ชันเมื่อผู้ใช้คลิกปุ่มหรือองค์ประกอบเว็บอื่น วิธีนี้ใช้ทั้งแบบอินไลน์ในเอกสาร HTML และในเอกสาร JavaScript

เมื่อคุณเขียนโค้ดใน JavaScript เป็นเรื่องปกติที่จะต้องการเรียกใช้โค้ดเมื่อผู้ใช้โต้ตอบกับหน้าเว็บ ตัวอย่างเช่น คุณอาจต้องการให้บางสิ่งเกิดขึ้นเมื่อผู้ใช้กดปุ่ม แต่คุณจะใช้งานฟังก์ชันนี้ใน JavaScript ได้อย่างไร

นั่นคือสิ่งที่เหตุการณ์ “onclick()” จะมีประโยชน์ เหตุการณ์ onclick เป็นหนึ่งในประเภทเหตุการณ์ที่ใช้บ่อยที่สุด onclick ให้คุณเรียกใช้โค้ดเมื่อผู้ใช้คลิกปุ่มหรือองค์ประกอบอื่นบนหน้าเว็บของคุณ

ในคำแนะนำสั้น ๆ นี้ เราจะอธิบายวิธีการทำงานของฟังก์ชัน onclick เราจะพูดถึงวิธีการใช้ onclick ในโค้ดของคุณเพื่อทำให้เว็บไซต์มีการโต้ตอบ

ทบทวนกิจกรรม

Onclick เป็นประเภทของเหตุการณ์ JavaScript เหตุการณ์คือการกระทำที่เกิดขึ้นในเบราว์เซอร์ที่ผู้ใช้หรือตัวเบราว์เซอร์เองสามารถเริ่มต้นได้ ผู้ใช้คลิกปุ่ม ส่งแบบฟอร์ม หรือการกดแป้นบนแป้นพิมพ์คือตัวอย่างเหตุการณ์ที่เกิดขึ้นจริงทั้งหมด ในบทช่วยสอนนี้ เราจะเน้นที่ส่วนแรก:ผู้ใช้คลิกองค์ประกอบ

โดยการใช้กิจกรรม นักพัฒนาสามารถสร้างหน้าเว็บแบบโต้ตอบได้ คุณสามารถทำให้แบบฟอร์มมองเห็นได้เมื่อผู้ใช้คลิกปุ่ม หรือแสดงข้อความถึงผู้ใช้เมื่อส่งแบบฟอร์ม

มีสององค์ประกอบหลักในเหตุการณ์:ตัวจัดการเหตุการณ์และตัวฟังเหตุการณ์

เมื่อคุณคลิกปุ่ม กดปุ่ม หรือวางเมาส์เหนือองค์ประกอบ เหตุการณ์จะถูกเรียกใช้ ตัวจัดการเหตุการณ์คือรหัสที่ทำงานเมื่อกิจกรรมของคุณเริ่มต้น ตัวอย่างเช่น เมื่อคุณคลิกปุ่ม ตัวจัดการเหตุการณ์จะทำงาน

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

Listener เหตุการณ์เป็นส่วนหนึ่งขององค์ประกอบ—เช่นปุ่ม—ที่ “ฟัง” และรอจนกว่าคุณจะโต้ตอบกับมัน จากนั้นผู้ฟังจะเรียกใช้ตัวจัดการเหตุการณ์

จาวาสคริปต์เมื่อคลิก

เหตุการณ์ JavaScript onclick เรียกใช้ฟังก์ชันเมื่อคุณคลิกที่ปุ่มหรือองค์ประกอบเว็บอื่น ตัวอย่างเช่น เหตุการณ์ onclick สามารถเรียกกล่องโต้ตอบให้ปรากฏขึ้นเมื่อคุณนาฬิกาบนปุ่ม

นี่คือไวยากรณ์สำหรับวิธีการ onclick ใน HTML:

<button onclick="codetorun">Click me</button>

เมื่อคลิกปุ่ม HTML นี้ ฟังก์ชัน "codetorun" JavaScript จะทำงาน เราสามารถใช้ onclick ร่วมกับองค์ประกอบอื่นๆ เช่น div onclick ไม่ได้เป็นเอกสิทธิ์ของปุ่ม

คุณสามารถใช้ onclick ใน JavaScript ธรรมดาได้ นี่คือตัวอย่างของวิธีการ onclick ของ JavaScript:

var item = document.getElementById("button");
item.onclick = function() {
	codetoexecute...
}

เราใช้เมธอด JavaScript getElementById เพื่อดึงองค์ประกอบจากหน้าเว็บของเรา เมื่อเราคลิกที่องค์ประกอบด้วยปุ่ม "ID" ID ฟังก์ชัน onclick ของเราจะทำงาน

ตัวอย่างปุ่ม onclick JavaScript

สมมติว่าคุณต้องการเปลี่ยนข้อความบนหน้าเว็บหลังจากที่คุณคลิกองค์ประกอบ p หรือย่อหน้า เราสามารถใช้แอตทริบิวต์ onclick เพื่อใช้งานคุณลักษณะนี้บนเว็บไซต์ได้ เริ่มต้นด้วยหน้า HTML ที่มีปุ่มและข้อความ นอกจากนี้เรายังจะสร้างไฟล์ JavaScript ที่จะเก็บรหัสเหตุการณ์ของเราไว้ด้วย

index.html

<!DOCTYPE html>
<html>

<head>
	<title>onclick example</title>
</head>
<!-- Main body of code -->
<body>
	<button>Click here.</button>

	<p>This text will change when you click the button.</p>
</body>

<!-- Reference our JavaScript event code -->
<script src=”js/onclick.js”></script>

</html>

นี่เป็นตัวอย่างของหน้าเว็บพื้นฐาน แต่ยังไม่มีการโต้ตอบ เมื่อหน้าเว็บนี้ทำงาน เราจะเห็นปุ่มและข้อความบางส่วน แต่จะไม่มีอะไรเกิดขึ้นเมื่อคลิกปุ่มของเรา นั่นเป็นเพราะเรายังไม่ได้ใช้งานฟังก์ชันสคริปต์ onclick

เมื่อหน้าเว็บของเราพร้อมแล้ว ก็เริ่มสร้างกิจกรรม onclick ได้ ก่อนอื่นเราต้องเพิ่มตัวฟังเหตุการณ์ onclick() ให้กับปุ่มของเรา เหตุการณ์นี้จะฟังเมื่อผู้ใช้คลิกที่ปุ่ม

index.html

...
<body>
	<button onclick=”changeParagraph()”>Click here.</button>

	<p>This text will change when you click the button.</p>
</body>
…

มาสร้างไฟล์ “onclick.js” ของเรา ซึ่งจะเก็บโค้ดสำหรับเหตุการณ์ changeParagraph() ของเรา เหตุการณ์นี้จะเปลี่ยนข้อความในย่อหน้าของเรา (องค์ประกอบ “p”) เป็นอย่างอื่น

onclick.js

const changeParagraph = () => {
	const paragraph = document.querySelector(“p”);
	paragraph.textContent = “This text has changed because you clicked the button.”
}

เราได้กำหนดฟังก์ชัน JavaScript ที่เรียกว่า changeParagraph เราใช้เมธอด JavaScript querySelector เพื่อเลือกย่อหน้าบนหน้าเว็บของเรา เมื่อเราโหลดหน้าเว็บครั้งแรก เราจะเห็นปุ่มและข้อความที่ระบุว่า "ข้อความนี้จะเปลี่ยนเมื่อคุณคลิกปุ่ม"

หลังจากที่เราคลิกปุ่ม หน้าเว็บของเราจะเปลี่ยนแปลงและแสดงข้อความใหม่ของเรา:

JavaScript Onclick:คำแนะนำทีละขั้นตอน

สรุป

โดยรวมแล้ว onclick() เป็นประเภทของเหตุการณ์ JavaScript ที่ให้คุณเรียกใช้โค้ดบางโค้ดเมื่อมีการคลิกองค์ประกอบบนหน้าเว็บ

แค่นั้นแหละ! ด้วยการใช้โค้ดด้านบนนี้ เราได้สร้างหน้าเว็บที่จะรันโค้ดได้สำเร็จเมื่อเรากดปุ่ม แม้ว่าโค้ดของเราด้านบนจะเปลี่ยนเฉพาะข้อความ คุณสามารถสร้างความซับซ้อนหรือเรียบง่ายได้ตามที่คุณต้องการ

หากคุณต้องการให้ผู้ใช้ได้รับการแจ้งเตือนเมื่อคลิกปุ่ม คุณสามารถใช้ฟังก์ชัน alert() ใน JavaScript หากคุณต้องการเพิ่มคำสั่ง “if” ลงในโค้ดของคุณ คุณก็สามารถทำได้เช่นกัน

สำหรับแหล่งข้อมูลการเรียนรู้ JavaScript เพิ่มเติม โปรดดูคู่มือ How to Learn JavaScript