Các cách nhận dữ liệu đầu vào trong JavaScript

Các cách nhận dữ liệu đầu vào trong JavaScript

Anh NguyễnBạn nghĩ gì về bài viết này?

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é!

>> Xem ngay Tài liệu Java Core giúp bạn “Nâng Cấp” kỹ năng lập trì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 .value từ 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

Bình luận