การทำงานกับช่องข้อความใน JavaScript
ตอนนี้เราจะเรียนรู้วิธีการรับข้อความ
จากผู้ใช้ของเว็บไซต์ของเรา สำหรับสิ่งนี้
ใน HTML มีแท็กพิเศษ input,
ซึ่งเป็นช่องข้อความสำหรับป้อน
ข้อมูล
<input>
แท็กนี้มีแอตทริบิวต์พิเศษ value,
ที่กำหนดข้อความเริ่มต้น ซึ่งจะถูกเขียน
ในอินพุตเมื่อเข้าสู่หน้าเว็บ:
<input value="text">
ผู้ใช้เว็บไซต์ของเราหลังจากเข้าสู่
หน้าเว็บแล้วสามารถเปลี่ยนข้อความของอินพุตได้ ใน
ขณะเดียวกัน หากเรามีตัวแปรที่เก็บ
ลิงก์ไปยังอินพุตนี้ คุณสมบัติ value
ของตัวแปรนี้จะเก็บค่า
ข้อความปัจจุบันของอินพุตเสมอ
ลองทดสอบในทางปฏิบัติ สมมติว่ามีอินพุต
ที่มีแอตทริบิวต์ value:
<input id="elem" value="text">
รับลิงก์ไปยังอินพุตนี้ในตัวแปร:
let elem = document.querySelector('#elem');
จากนั้นแสดงข้อความปัจจุบันของอินพุตออกทางหน้าจอ:
console.log(elem.value);
จากนั้นเปลี่ยนข้อความของอินพุตเป็นอย่างอื่น:
elem.value = 'new text';
กำหนดอินพุตและปุ่ม เมื่อคลิกปุ่ม ให้เขียนข้อความบางอย่างลงในอินพุต
กำหนดอินพุต ย่อหน้า และปุ่ม เมื่อคลิก ปุ่มให้เขียนข้อความจากอินพุตลงในย่อหน้า
กำหนดอินพุตสองช่องและปุ่ม ในอินพุตแรก ผู้ใช้ป้อนตัวเลข เมื่อคลิก ปุ่มให้เขียนกำลังสองของตัวเลขที่ป้อน ลงในอินพุตที่สอง
กำหนดอินพุตสองช่องและปุ่ม เมื่อคลิกปุ่ม ให้เขียนในอินพุตแรกเป็นค่าของ อินพุตที่สอง และในอินพุตที่สอง - เป็นค่าของอินพุตแรก โค้ดของคุณต้องทำงานได้ทั่วไป สำหรับ ค่าอินพุตใดๆ ก็ตาม
กำหนดอินพุต 5 ช่อง ย่อหน้าและปุ่ม ใน
อินพุตมีการป้อนตัวเลข เมื่อคลิกปุ่ม
ให้เขียนค่าเฉลี่ยเลขคณิตของตัวเลขที่ป้อน
ลงในย่อหน้า
