Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> JavaScript

Tạo nút bấm thêm văn bản vào ô input HTML với JavaScript

Dùng addEventListener('click') trên button, cập nhật value của input bằng toán tử +=.

Ví dụ


<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Thêm text vào input</title>
</head>
<body>
    <button id="btnAdd">Thêm "JavaScript"</button>
    <br><br>
    <input id="txtInput" />

    <script>
        document.getElementById("btnAdd").addEventListener("click", () => {
            document.getElementById("txtInput").value += "JavaScript";
        });
    </script>
</body>
</html>

Cách chạy

Lưu index.html, mở Live Server, nhấn nút nhiều lần.

Kết quả

Mỗi lần click, "JavaScript" được nối thêm vào ô input: JavaScriptJavaScriptJavaScript...

Mở rộng: Thêm khoảng trắng: value += " JavaScript" hoặc dùng value = value ? value + " JavaScript" : "JavaScript".