NỘI DUNG BÀI VIẾT
Trong bài viết này, chúng ta cùng tìm hiểu về các cách nhận dữ liệu đầu vào trong JavaScript nhé!
Các cách nhận dữ liệu đầu vào trong JavaScript
JavaScript có thể nhận dữ liệu đầu vào từ người dùng theo nhiều cách khác nhau:
- Sử dụng hàm
prompt()để nhận dữ liệu qua một hộp thoại thông báo - Sử dụng thuộc tính
.valuetừ các thẻ<input>và<select>
Sử dụng prompt()
Sử dụng hàm prompt() sẽ giúp bạn nhanh chóng nhận được dữ liệu nhập vào từ người dùng qua một hộp thoại:
Ví dụ
<!DOCTYPE html>
<html>
<body>
<script>
let myName = prompt("Hãy nhập họ tên của bạn:");
</script>
</body>
</html>Code language: HTML, XML (xml)Đoạn mã trên sẽ hiển thị một hộp thoại như bên dưới
Sử dụng thuộc tính .value
Với các thẻ <input>, chúng ta có thể lấy được giá trị người dùng nhập vào trên giao diện.
Ví dụ
Tạo một thẻ <input> trên giao diện với mã như sau:
<input id="myName" type="text"></input>
Để truy cập giá trị của input trên, chúng ta thực hiện lần lượt các bước:
Bước 1: Định nghĩa hàm có tên là getValue với cú pháp như bên dưới (kiến thức về hàm sẽ được trình bày ở các bài học về sau):
<script>
function getValue() {
...
}
</script>Code language: HTML, XML (xml)Bước 2: Truy cập đến phần tử <input> qua id:
let myInput = document.getElementById("myName");
Bước 3: Truy cập đến value của myInput:
let myName = myInput.value;
alert("Tên của bạn là " + myName); // hiển thị tên của người dùng
Bước 4: Gọi hàm getValue() qua sự kiện từ người dùng. Chúng ta xem ví dụ dưới đây thể hiện sự kiện click vào một button trên giao diện:
<button type="button" onclick="getValue()">Hiển thị tên</button>
Toàn bộ các bước trên sẽ tạo ra đoạn mã như sau:
<!DOCTYPE html><html><body><h3>Hãy điền tên vào ô nhập bên dưới</h3><input id="myName" type="text"></input><button type="button" onclick="getValue()">Hiển thị tên</button> <script>function getValue() {let myInput = document.getElementById("myName"); let myName = myInput.value;alert("Tên của bạn là " + myName); // hiển thị tên của người dùng}</script></body></html>
Cảm ơn bạn đã theo dõi bài viết!
Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.
Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.
TỔNG HỢP TÀI LIỆU HỌC LẬP TRÌNH CƠ BẢN CHO NGƯỜI MỚI BẮT ĐẦU
KHOÁ HỌC BOOTCAMP JAVA/JAVASCRIPT/PHP TRỞ THÀNH LẬP TRÌNH VIÊN TRONG 5-6 THÁNG
