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

Làm cách nào để bạn tạo một nút thêm văn bản trong HTML ?

Giả sử sau đây là nút HTML của chúng tôi -

<button id="clickButton">Click the button to add the input into the belowText Box</button>

Sử dụng document.getElementById () để thêm văn bản trong khi nhấp vào nút. Sau đây là mã -

Ví dụ

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<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>
</head>
<body>
<button id="clickButton">Click the button to add the input into the
below Text Box</button>
<br/><br />
<input id="readTheInput" />
<script>
   document.getElementById("clickButton").addEventListener("click", () =>{
      document.getElementById("readTheInput").value += "JavaScript";
   });
</script>
</body>
</html>

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

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Làm cách nào để bạn tạo một nút thêm văn bản trong HTML  input ?

Ở đây, tôi sẽ nhấp vào nút hai lần. Điều này sẽ tạo ra kết quả sau -

Làm cách nào để bạn tạo một nút thêm văn bản trong HTML  input ?