วิธีสลับปุ่มใน JavaScript

• จะสลับปุ่มใน JavaScript ได้อย่างไร?
• ตัวอย่างที่ 1: การแก้ไขข้อความโดยสลับปุ่ม
• ตัวอย่างที่ 2: การสลับปุ่มเปิด/ปิดใน JavaScript

จะสลับปุ่มใน JavaScript ได้อย่างไร?

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

ตัวอย่างที่ 1: การแก้ไขข้อความโดยสลับปุ่ม

ตัวอย่างถือเป็นการแก้ไขข้อความโดยสลับปุ่มใน JavaScript ตัวอย่างประกอบด้วยโค้ด HTML และ JavaScript ซึ่งอธิบายไว้ด้านล่าง:

โค้ด HTML

ในโค้ด HTML คำอธิบายจะเป็นดังนี้:

• อา
  แท็กถูกสร้างขึ้นด้วย“ id=js ”
• หลังจากนั้นจะมีการสร้างปุ่มที่เกี่ยวข้องกับa “btntog()” กระบวนการ. โดยกด 'ปุ่ม' , วิธีการ ' btntog() ” ถูกกระตุ้น
• สุดท้ายนี้ไฟล์จาวาสคริปต์ “test.js” ถูกส่งผ่านเป็น src ภายใน
  

  ---

  รหัส JavaScript

  ฟังก์ชั่นbtntog ( )
  {
  ที่ไหน = เอกสาร. getElementById ( 'เจส' ) ;
  ถ้า ( ที innerHTML == 'ยินดีต้อนรับสู่ Linuxhint' ) {
  ที innerHTML = 'โลกจาวาสคริปต์' ; }
  อื่น {
  ที innerHTML = 'ยินดีต้อนรับสู่ Linuxhint' ; }
  }

  ในรหัสนี้:

  
  
  
  • getElementById ใช้เพื่อแยกองค์ประกอบ HTML “ js ” และค่าจะถูกเก็บไว้ในตัวแปร “ t ”
  • หลังจากนั้น innerHTML คุณสมบัติถูกใช้ในเงื่อนไข if เพื่อตรวจสอบข้อความ “ ยินดีต้อนรับสู่ Linuxhint ”
  • หากเงื่อนไขเป็นจริง เนื้อหา “ ยินดีต้อนรับสู่ Linuxhint ” ถูกแทนที่ด้วย “โลกจาวาสคริปต์ “.
  • หากเงื่อนไขเป็นเท็จ ข้อความ “ยินดีต้อนรับสู่ Linuxhint” ถูกกำหนดเป็นเนื้อหา HTML ให้กับแท็ก div

  เอาท์พุต

  

  ผลลัพธ์แสดงว่าการสลับปุ่มจะส่งกลับข้อความสองข้อความเป็น “ยินดีต้อนรับสู่ Linuxhint” และ “จาวาสคริปต์โลก” อีกทางหนึ่ง

  ตัวอย่างที่ 2: การสลับปุ่มเปิด/ปิดใน JavaScript

  มีการติดตามตัวอย่างเพื่อเปลี่ยนข้อความในบรรทัดของปุ่ม ในตัวอย่างนี้ “ เปิดปิด ” จะเปลี่ยนค่าโดยการกดปุ่ม รหัส HTML และ JavaScript มีให้ที่นี่:

  โค้ด HTML

  < html >
  
  < ชั่วโมง2 > ตัวอย่างการสลับปุ่ม ชั่วโมง2 >
  
  < ประเภทอินพุต = 'ปุ่ม' id = 'myBtn' ค่า = 'ปิด'
  
  เมื่อคลิก = 'วันที่();' >
  
  < สคริปต์ src = 'test.js' > สคริปต์ >
  
  html >

  รหัสข้างต้นอธิบายว่า:

  • ปุ่มคลิกได้ที่มีรหัสของ “myBtn” ถูกสร้างขึ้นและตั้งค่าเป็น 'ปิด' .
  • โดยกดปุ่ม วันที่() วิธีการจะถูกเรียกใช้
  • ในที่สุด, “test.js” แนบมากับเส้นทางต้นทางภายใน