Bài viết này sẽ trình bày các phương pháp để lấy và thiết lập các giá trị văn bản đầu vào trong JavaScript.
Làm thế nào để lấy và đặt giá trị văn bản đầu vào trong JavaScript?
Để lấy và đặt giá trị văn bản đầu vào trong JavaScript, hãy sử dụng:
- “ getElementById () ' phương pháp
- “ getElementByClassName () ' phương pháp
- “ querySelector () ' phương pháp
Đi qua từng phương pháp đã đề cập một!
Phương pháp 1: Lấy và đặt giá trị văn bản đầu vào trong JavaScript bằng phương thức document.getElementById ()
Các ' getElementById () ”Phương thức truy cập một phần tử có Id được chỉ định. Phương pháp này có thể được áp dụng để truy cập id của các trường đầu vào và các nút để lấy và thiết lập giá trị văn bản.
Cú pháp
tài liệu. getElementById ( các yếu tố )
Nơi đây, ' các yếu tố ”Đề cập đến Id được chỉ định của một phần tử.
Ví dụ dưới đây giải thích khái niệm đã thảo luận.
Thí dụ
Đầu tiên, hãy bao gồm hai trường loại đầu vào và các nút riêng biệt để nhận và thiết lập các giá trị văn bản đầu vào với “ trong một cái nhấp chuột ”Các sự kiện sẽ truy cập các chức năng được chỉ định:
< nút onclick = 'getText ()' > Nhận giá trị cái nút >
< nút onclick = 'getAndSetText ()' > Đặt giá trị cái nút >
< kiểu đầu vào = 'chữ' Tôi = 'setText' Tên = 'setText' trong một cái nhấp chuột = 'this.value = ''' />
Sau đó, lấy giá trị của trường đầu vào với sự trợ giúp của phương thức document.getElementById ():
tài liệu. getElementById ( 'getText' ) . giá trị = 'Nhập tại đây' ;Bây giờ, hãy khai báo một hàm có tên là “ getAndSetText () ”. Tại đây, tìm nạp trường đầu vào với “ getText 'Id và chuyển giá trị đầu vào cho trường nhập tiếp theo có' setText ' Tôi:
hàm số getAndSetText ( ) {là setText = tài liệu. getElementById ( 'getText' ) . giá trị ;
tài liệu. getElementById ( 'setText' ) . giá trị = setText ;
}
Tương tự, hãy xác định một hàm có tên là “ getText () ”. Sau đó, lấy trường đầu vào với “ getText ”Id và chuyển giá trị cụ thể vào hộp cảnh báo để nhận giá trị văn bản đầu vào:
hàm số getText ( ) {là getText = tài liệu. getElementById ( 'getText' ) . giá trị ;
báo động ( getText ) ;
}
Đầu ra
Phương pháp 2: Lấy và đặt giá trị văn bản đầu vào trong JavaScript bằng phương thức document.getElementByClassName ()
Các ' getElementByClassName () ”Phương thức truy cập một phần tử với sự trợ giúp của tên lớp được chỉ định. Tương tự, phương pháp này có thể được áp dụng để truy cập lớp của trường nhập và các nút để nhập và thiết lập giá trị văn bản.
Cú pháp
tài liệu. getElementsByClassName ( tên lớp )Trong cú pháp trên, ' tên lớp ”Đại diện cho tên lớp của các phần tử.
Thí dụ
Tương tự như ví dụ trước, trước tiên chúng ta sẽ truy cập vào trường đầu vào đầu tiên với “ getText ' tên lớp. Sau đó, xác định một hàm có tên là “ getAndSetText () ”Và lấy trường đầu vào được chỉ định dựa trên tên lớp của nó và đặt giá trị trong trường đầu vào tiếp theo:
hàm số getAndSetText ( )
{
là setText = tài liệu. getElementByClassName ( 'getText' ) . giá trị ;
tài liệu. getElementById ( 'setText' ) . giá trị = setText ;
}
Tương tự như vậy, hãy xác định một hàm có tên là “ getText () ”, Thêm tên lớp của trường nhập đầu tiên và chuyển giá trị cụ thể vào hộp cảnh báo để hiển thị giá trị đã tìm nạp:
hàm số getText ( ) {là getText = tài liệu. getElementByClassName ( 'getText' ) . giá trị ;
báo động ( getText ) ;
}
Việc triển khai này sẽ mang lại kết quả sau:
Phương pháp 3: Lấy và Đặt Giá trị Văn bản Đầu vào trong Javascript Sử dụng Phương thức “document.querySelector ()”
Các ' document.querySelector () ”Lấy chữ e đầu tiên đi xuống khớp với bộ chọn được chỉ định và phương thức addEventListener () có thể thêm một trình xử lý sự kiện vào phần tử đã chọn. Các phương pháp này có thể được áp dụng để lấy id của trường đầu vào và các nút và áp dụng trình xử lý sự kiện cho chúng.
Cú pháp
tài liệu. querySelector ( Bộ chọn CSS )Nơi đây, ' Bộ chọn CSS ”Đề cập đến một hoặc nhiều bộ chọn CSS.
Hãy xem ví dụ sau.
Thí dụ
Đầu tiên, bao gồm các loại đầu vào với các giá trị trình giữ chỗ và các nút của chúng để nhận và thiết lập các giá trị văn bản đầu vào:
< id nút = 'lấy' > LẤY cái nút >
< kiểu đầu vào = 'chữ' Tôi = 'input-set' trình giữ chỗ = 'Đặt giá trị' >
< id nút = 'bộ' > BỘ cái nút >
Tiếp theo, tìm nạp các trường và nút đầu vào đã thêm bằng cách sử dụng nút “ document.querySelector () ' phương pháp:
nút let = tài liệu. querySelector ( '#lấy' ) ;nút để đặt = tài liệu. querySelector ( '#bộ' ) ;
hãy để getInput = tài liệu. querySelector ( '# input-get' ) ;
hãy để setInput = tài liệu. querySelector ( '# input-set' ) ;
hãy để kết quả = tài liệu. querySelector ( '#kết quả' ) ;
Sau đó, bao gồm một trình xử lý sự kiện có tên là “ nhấp chuột ”Cho cả hai nút để nhận và đặt các giá trị, tương ứng:
buttonGet. addEventListener ( 'nhấp chuột' , ( ) => {kết quả. innerText = getInput. giá trị ;
} ) ;
buttonSet. addEventListener ( 'nhấp chuột' , ( ) => {
getInput. giá trị = setInput. giá trị ;
} ) ;
Đầu ra
Chúng tôi đã thảo luận về các phương pháp đơn giản nhất để lấy và thiết lập giá trị văn bản đầu vào trong JavaScript.
Sự kết luận
Để lấy và đặt giá trị văn bản đầu vào trong JavaScript, hãy sử dụng “ document.getElementById () ”Hoặc phương pháp
“ document.getElementByClassName () ”Để truy cập trường đầu vào được chỉ định và các nút dựa trên id hoặc tên lớp của chúng và sau đó đặt giá trị của chúng. Hơn nữa, “ document.querySelector () ”Cũng có thể được sử dụng để lấy và thiết lập các giá trị văn bản đầu vào trong JavaScript. Blog này giải thích các phương pháp lấy và đặt giá trị văn bản đầu vào trong JavaScript.