Computer >> Máy Tính >  >> Lập trình >> Javascript

Làm thế nào để hiển thị giá trị của hộp văn bản trong JavaScript?

Trích xuất giá trị từ hộp văn bản bằng cách sử dụng giá trị và có thể hiển thị trong đoạn văn bằng innerHTML.

Ví dụ

Sau đây là mã -

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
   Enter your Name:
   <input type="text" placeholder="enter your name" id="txtInputData">
   <button onclick="displayName()">Click Me</button>
   <p id="show_name">
   </p>
</body>
<script>
   function displayName() {
      var originalName = document.getElementById("txtInputData").value;
      document.getElementById("show_name").innerHTML = "Your Name is :" + originalName;
   }
</script>
</html>

Để chạy chương trình trên, hãy lưu tên tệp “anyName.html (index.html)”. Nhấp chuột phải vào tệp và chọn tùy chọn “Mở bằng Máy chủ trực tiếp” trong trình chỉnh sửa VSCode -

Đầu ra

Điều này sẽ tạo ra kết quả sau trên bảng điều khiển -

Làm thế nào để hiển thị giá trị của hộp văn bản trong JavaScript?

Bây giờ, hãy nhập giá trị vào hộp văn bản và nhấp vào nút -

Làm thế nào để hiển thị giá trị của hộp văn bản trong JavaScript?

Sau khi nhấp vào nút, kết quả như sau -

Làm thế nào để hiển thị giá trị của hộp văn bản trong JavaScript?