Cách gán giá trị cho hộp văn bản bằng JavaScript

Cach Gan Gia Tri Cho Hop Van Ban Bang Javascript



Đôi khi, bạn có thể cần đặt giá trị hộp văn bản dựa trên bất kỳ sự kiện nào. Bạn có thể thực hiện việc này bằng cách thêm một phần tử hộp văn bản đầu vào trong tệp HTML và đặt giá trị thuộc tính của nó dựa trên yêu cầu. JavaScript có các phương thức được xác định trước có thể hữu ích cho mục đích đã nêu.

Bài đăng này sẽ xác định quy trình gán giá trị cho hộp văn bản bằng JavaScript.

Làm thế nào để chỉ định giá trị cho hộp văn bản bằng JavaScript?

Để gán giá trị cho hộp văn bản, hãy sử dụng các phương pháp sau:







Hãy xem xét hoạt động của các phương pháp này một cách riêng biệt!



Phương pháp 1: Gán giá trị cho hộp văn bản bằng phương thức setAttribute ()

Các ' setAttribute () ”Được sử dụng để gán một giá trị cho hộp văn bản. Nó được sử dụng để thêm hoặc đặt một thuộc tính cho một phần tử nhất định và cung cấp cho nó một giá trị. Phương thức này nhận hai tham số làm đối số và cả hai đều là bắt buộc.



Cú pháp





Làm theo cú pháp được đề cập bên dưới cho phương thức setAttribute ():

setAttribute ( thuộc tínhName, thuộc tínhValue ) ;

Nơi đây, ' giá trị thuộc tính ”Là giá trị của thuộc tính có tên được chỉ định.



Thí dụ

Trước tiên, chúng tôi sẽ tạo một tiêu đề và một trường đầu vào với mặc định “ Chữ ”Giá trị trình giữ chỗ. Tiếp theo, thêm một nút sẽ gọi phương thức “myFunction ()” khi nó được nhấp vào:

< h5 > Nhấp vào nút để xem mặc định giá trị của trường văn bản. h5 >

< kiểu đầu vào = 'chữ' Tôi = 'Văn bản của tôi' trình giữ chỗ = 'Chữ' >

< nút onclick = 'myFunction ()' > Nhấp chuột cái nút >

Trong tệp JS, hãy xác định một hàm có tên là “ myFunction () ”Và truy cập hộp văn bản bằng cách sử dụng“ getElementbyId () 'Và sau đó đặt giá trị với sự trợ giúp của' setAttribute () ' phương pháp:

chức năng myFunction ( ) {

tài liệu. getElementById ( 'Văn bản của tôi' ) . setAttribute ( 'giá trị' , 'LinuxHint' ) ;

}

Từ đầu ra có thể thấy rằng khi nút được nhấp, giá trị của hộp văn bản được đặt là “ LinuxHint ”:

Hãy xem quy trình tiếp theo để gán giá trị cho hộp văn bản.

Phương pháp 2: Gán giá trị cho hộp văn bản bằng thuộc tính giá trị văn bản

Có một cách tiếp cận khác để gán giá trị cho hộp văn bản, đó là “ giá trị ”Thuộc tính của văn bản. Trong cách tiếp cận này, bạn chỉ phải gán giá trị cho hộp văn bản bằng cách sử dụng thuộc tính giá trị.

Cú pháp

Sử dụng cú pháp sau để gán giá trị cho hộp văn bản bằng thuộc tính giá trị của phần tử văn bản:

giá trị = 'Chữ' ;

Thí dụ

Ở đây, chúng tôi sẽ gán giá trị cho hộp văn bản đã được tạo trong ví dụ trước. Để làm như vậy, hãy truy cập hộp văn bản trong myFunction () và sau đó, gán giá trị bắt buộc cho hộp văn bản bằng cách sử dụng “ giá trị ' tài sản:

chức năng myFunction ( ) {

tài liệu. getElementById ( 'Văn bản của tôi' ) . giá trị = 'LinuxHint' ;

}

Như bạn có thể thấy kết quả đầu ra thành công, hãy gán giá trị cho hộp văn bản:

Chúng tôi đã tập hợp các phương pháp đơn giản nhất để gán giá trị cho hộp văn bản bằng JavaScript.

Sự kết luận

Để gán giá trị cho hộp văn bản bằng JavaScript, bạn có thể sử dụng phương thức định sẵn JavaScript được gọi là phương thức setAttribute () hoặc thuộc tính giá trị của phần tử văn bản. Cả hai cách tiếp cận này đều hoạt động hiệu quả để gán giá trị cho hộp văn bản. Bạn có thể chọn một trong số chúng theo yêu cầu của bạn. Trong bài đăng này, chúng tôi đã thảo luận về các phương pháp chỉ định giá trị cho hộp văn bản bằng JavaScript với các ví dụ chi tiết.