วิธีสร้างกล่องข้อความแบบไดนามิกใน JavaScript

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

การสร้างกล่องข้อความ

ก่อนที่จะทำให้กล่องข้อความเป็นจริงคุณต้องเข้าใจว่ากล่องข้อความคืออะไร HTML รู้ว่าเป็นแท็กอินพุตดังที่แสดงในตัวอย่างต่อไปนี้:

แท็กอินพุตนี้สร้างกล่องข้อความที่มีคุณลักษณะที่สำคัญสองอย่าง id และประเภท แอตทริบิวต์ type ซึ่งมีค่าเป็น "text" จะบอกให้เบราว์เซอร์สร้างกล่องข้อความแทนการควบคุมประเภทอื่นเช่นปุ่ม แอตทริบิวต์ id ซึ่งเป็นทางเลือกอาจมีประโยชน์หากคุณต้องการจัดการกล่องข้อความในภายหลัง ตัวเลือกค่าซึ่งเป็นทางเลือกจะมีค่าที่คุณต้องการเห็นในกล่องข้อความเมื่อหน้าเว็บเปิดขึ้น

กล่องข้อความแบบไดนามิก

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

var box = document.createElement ("อินพุต");

เพียงเท่านี้ก็สามารถสร้างองค์ประกอบอินพุต HTML และกำหนดให้กับตัวแปรชื่อ "box" วัตถุกล่องจะไม่กลายเป็นกล่องข้อความจนกว่าคุณจะให้แอตทริบิวต์ type เป็นค่า "text" ดังที่แสดงในตัวอย่างนี้:

box.type = "ข้อความ";

การรวมเว็บเพจ

โค้ดด้านล่างนี้ต่อท้ายกล่องข้อความเข้ากับเอกสาร HTML โดยใช้ฟังก์ชัน appendChild ที่มีประโยชน์:

document.body.appendChild (กล่อง);

หากคุณต้องการต่อท้ายกล่องข้อความหลังตัวควบคุมเฉพาะให้ใช้คำสั่งต่อไปนี้แทน:

document.getElementById ("some_Element_ID"). appendChild (กล่อง);

แทนที่ "some_Element_ID" ด้วยชื่อขององค์ประกอบที่คุณต้องการต่อท้ายกล่องข้อความ ตัวอย่างเช่นหากองค์ประกอบนั้นเป็นปุ่มที่มี ID เป็น "button1" คำสั่ง appendChild จะปรากฏดังนี้:

document.getElementById ("button1"). appendChild (กล่อง);

คุณสมบัติเสริม

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

box.value = boxValue; box.id = boxID;

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

var boxObject = document.getElementById (boxID); boxObject.style.backgroundColor = "สีแดง";

คำสั่งแรกได้รับการอ้างอิงถึงกล่องข้อความและคำสั่งสุดท้ายเปลี่ยนสีพื้นหลังของกล่องข้อความเป็นสีแดง