บทความนี้จะสาธิตวิธีการรับและตั้งค่าข้อความอินพุตใน JavaScript
จะรับและตั้งค่าข้อความอินพุตใน JavaScript ได้อย่างไร
ในการรับและตั้งค่าข้อความอินพุตใน JavaScript ให้ใช้:
- “ getElementById() ' กระบวนการ
- “ getElementByClassName() ' กระบวนการ
- “ แบบสอบถามตัวเลือก () ' กระบวนการ
ผ่านแต่ละวิธีที่กล่าวถึงทีละคน!
วิธีที่ 1: รับและตั้งค่าข้อความอินพุตใน JavaScript โดยใช้ document.getElementById() Method
“ getElementById() ” วิธีเข้าถึงองค์ประกอบด้วยรหัสที่ระบุ วิธีนี้สามารถใช้เพื่อเข้าถึงรหัสของช่องป้อนข้อมูลและปุ่มเพื่อรับและตั้งค่าข้อความ
ไวยากรณ์
เอกสาร. getElementById ( องค์ประกอบ )
ที่นี่, ' องค์ประกอบ ” หมายถึงรหัสที่ระบุขององค์ประกอบ
ตัวอย่างด้านล่างอธิบายแนวคิดที่กล่าวถึง
ตัวอย่าง
ประการแรก รวมฟิลด์ประเภทอินพุตสองฟิลด์และปุ่มแยกสำหรับรับและตั้งค่าข้อความอินพุตด้วยปุ่ม ' เมื่อคลิก ” เหตุการณ์ที่จะเข้าถึงฟังก์ชั่นที่ระบุ:
< ปุ่ม onclick = 'getText()' > รับความคุ้มค่า ปุ่ม >
< ปุ่ม onclick = 'getAndSetText()' > ตั้งค่า ปุ่ม >
< ประเภทอินพุต = 'ข้อความ' id = 'เซ็ตข้อความ' ชื่อ = 'เซ็ตข้อความ' เมื่อคลิก = 'this.value = '' ' />
จากนั้น รับค่าของฟิลด์อินพุตโดยใช้เมธอด document.getElementById()
เอกสาร. getElementById ( 'รับข้อความ' ) . ค่า = 'ป้อนที่นี่' ;ตอนนี้ประกาศฟังก์ชั่นชื่อ “ getAndSetText() ” ที่นี่ดึงฟิลด์อินพุตด้วย“ รับข้อความ ” id และส่งค่าอินพุตไปยังช่องอินพุตถัดไปที่มี “ ตั้งค่าข้อความ ” รหัส:
การทำงาน getAndSetText ( ) {เคยเป็น ตั้งค่าข้อความ = เอกสาร. getElementById ( 'รับข้อความ' ) . ค่า ;
เอกสาร. getElementById ( 'setText' ) . ค่า = ตั้งค่าข้อความ ;
}
ในทำนองเดียวกันให้กำหนดฟังก์ชันชื่อ “ รับข้อความ () ” หลังจากนั้นรับช่องใส่ด้วย “ รับข้อความ ” id และส่งค่าเฉพาะไปยังกล่องแจ้งเตือนเพื่อรับค่าข้อความที่ป้อน:
การทำงาน รับข้อความ ( ) {เคยเป็น รับข้อความ = เอกสาร. getElementById ( 'รับข้อความ' ) . ค่า ;
เตือน ( รับข้อความ ) ;
}
เอาท์พุต
วิธีที่ 2: รับและตั้งค่าอินพุตข้อความใน JavaScript โดยใช้ document.getElementByClassName() Method
“ getElementByClassName() ” วิธีเข้าถึงองค์ประกอบด้วยความช่วยเหลือของชื่อคลาสที่ระบุ ในทำนองเดียวกัน วิธีนี้สามารถใช้เพื่อเข้าถึงคลาสของช่องใส่ข้อมูลและปุ่มสำหรับป้อนและตั้งค่าข้อความ
ไวยากรณ์
เอกสาร. getElementsByClassName ( classname )ในไวยากรณ์ข้างต้น “ classname ” หมายถึงชื่อคลาสขององค์ประกอบ
ตัวอย่าง
คล้ายกับตัวอย่างก่อนหน้านี้ เราจะเข้าถึงช่องป้อนข้อมูลแรกด้วยปุ่ม “ รับข้อความ ” ชื่อคลาส จากนั้นกำหนดฟังก์ชันชื่อ “ getAndSetText() ” และรับฟิลด์อินพุตที่ระบุตามชื่อคลาสและตั้งค่าในฟิลด์อินพุตถัดไป:
การทำงาน getAndSetText ( )
{
เคยเป็น ตั้งค่าข้อความ = เอกสาร. getElementByClassName ( 'รับข้อความ' ) . ค่า ;
เอกสาร. getElementById ( 'setText' ) . ค่า = ตั้งค่าข้อความ ;
}
ในทำนองเดียวกันให้กำหนดฟังก์ชั่นชื่อ “ รับข้อความ () ” เพิ่มชื่อคลาสของฟิลด์อินพุตแรกและส่งค่าเฉพาะไปยังกล่องแจ้งเตือนเพื่อแสดงค่าที่ดึงมา:
การทำงาน รับข้อความ ( ) {เคยเป็น รับข้อความ = เอกสาร. getElementByClassName ( 'รับข้อความ' ) . ค่า ;
เตือน ( รับข้อความ ) ;
}
การใช้งานนี้จะให้ผลลัพธ์ต่อไปนี้:
วิธีที่ 3: รับและตั้งค่าข้อความป้อนเข้าใน Javascript โดยใช้ 'document.querySelector()' Method
“ document.querySelector() ” เรียก e . แรก ลงไป ที่ตรงกับตัวเลือกที่ระบุ และเมธอด addEventListener() สามารถเพิ่มตัวจัดการเหตุการณ์ให้กับองค์ประกอบที่เลือกได้ สามารถใช้เมธอดเหล่านี้เพื่อรับ id ของฟิลด์อินพุตและปุ่ม และใช้ตัวจัดการเหตุการณ์กับพวกเขา
ไวยากรณ์
เอกสาร. แบบสอบถามตัวเลือก ( ตัวเลือก CSS )ที่นี่, ' ตัวเลือก CSS ” หมายถึงตัวเลือก CSS หนึ่งตัวขึ้นไป
ดูตัวอย่างต่อไปนี้
ตัวอย่าง
ประการแรก รวมประเภทการป้อนข้อมูลด้วยค่าตัวยึดตำแหน่งและปุ่มสำหรับรับและตั้งค่าข้อความป้อนเข้า:
< รหัสปุ่ม = 'รับ' > รับ ปุ่ม >
< ประเภทอินพุต = 'ข้อความ' id = 'ชุดอินพุต' ตัวยึดตำแหน่ง = 'ตั้งค่า' >
< รหัสปุ่ม = 'ชุด' > ชุด ปุ่ม >
ถัดไป ดึงฟิลด์อินพุตและปุ่มที่เพิ่มเข้ามาโดยใช้ปุ่ม “ document.querySelector() ' กระบวนการ:
ให้ปุ่มGet = เอกสาร. แบบสอบถามตัวเลือก ( '#รับ' ) ;ให้ปุ่มSet = เอกสาร. แบบสอบถามตัวเลือก ( '#ชุด' ) ;
ปล่อยให้ getInput = เอกสาร. แบบสอบถามตัวเลือก ( '#อินพุต-รับ' ) ;
ให้ setInput = เอกสาร. แบบสอบถามตัวเลือก ( '#อินพุตชุด' ) ;
ให้ผล = เอกสาร. แบบสอบถามตัวเลือก ( '#ผลลัพธ์' ) ;
จากนั้นให้รวมตัวจัดการเหตุการณ์ชื่อ “ คลิก ” สำหรับทั้งสองปุ่มเพื่อรับและตั้งค่าตามลำดับ:
ปุ่มรับ addEventListener ( 'คลิก' , ( ) => {ผลลัพธ์. innerText = รับอินพุต ค่า ;
} ) ;
ปุ่มชุด addEventListener ( 'คลิก' , ( ) => {
รับอินพุต ค่า = ตั้งค่าอินพุต ค่า ;
} ) ;
เอาท์พุต
เราได้พูดถึงวิธีที่ง่ายที่สุดในการรับและตั้งค่าข้อความอินพุตใน JavaScript
บทสรุป
ในการรับและตั้งค่าข้อความอินพุตใน JavaScript ให้ใช้ “ document.getElementById() ” วิธีหรือ
“ document.getElementByClassName() ” วิธีการเข้าถึงช่องป้อนข้อมูลและปุ่มที่ระบุตามรหัสหรือชื่อคลาสแล้วตั้งค่า นอกจากนี้ “ document.querySelector() ” สามารถใช้เพื่อรับและตั้งค่าข้อความอินพุตใน JavaScript บล็อกนี้อธิบายวิธีการรับและตั้งค่าข้อความอินพุตใน JavaScript