Chúng ta sẽ tạo hai nút, một cho Tăng và một cho Giảm:
Khi nhấp Tăng (+), người dùng có thể tăng số trong input type number
Khi nhấp Giảm (-), người dùng có thể giảm số trong input type number
Ví dụ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<input id=demoInput type=number min=100 max=110>
<button onclick="increment()">+</button>
<button onclick="decrement()">-</button>
<script>
function increment() {
document.getElementById('demoInput').stepUp();
}
function decrement() {
document.getElementById('demoInput').stepDown();
}
</script>
</body>
</html>
Để chạy chương trình trên, lưu tệp với tên "anyName.html (index.html)" và nhấp chuột phải vào tệp. Chọn tùy chọn "Open with Live Server" trong trình soạn thảo VS Code.
Kết quả
Chương trình sẽ cho ra kết quả sau:
Nếu bạn nhấp nút tăng (+) thì nó sẽ cộng 1. Khi nhấp giảm (-), 1 sẽ bị trừ đi.
Ở đây, tôi sẽ sử dụng nút +.
Chương trình sẽ cho ra kết quả sau:
