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

Phương thức stepDown() của Input Number trong HTML DOM

Phương thức stepDown() của <input type="number"> **giảm** giá trị số xuống một khoảng xác định. Nếu bỏ qua tham số, mặc định giảm theo step (mặc định 1).

Cú pháp

numberInput.stepDown(number)

number (tùy chọn): Số lượng muốn giảm. Mặc định = step attribute (thường là 1).

Ví dụ: Tăng/giảm số bằng nút bấm (bước 10)

<!DOCTYPE html>
<html>
<head>
    <title>Demo stepUp()/stepDown() Number</title>
    <style>
        body { text-align: center; background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat; height: 100vh; color: white; font-family: sans-serif; }
        p { font-size: 1.5rem; }
        input[type="number"] { width: 40%; padding: 8px; }
        button {
            background-color: #dc3545; color: white; padding: 8px 16px;
            border: none; width: 140px; margin: 10px; border-radius: 25px;
            outline: none; cursor: pointer; font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>Demo stepUp()/stepDown() Number</h1>
    <p>Bạn bao nhiêu tuổi?</p>
    <input type="number" id="numInput">
    <br><br>
    <button onclick="incValue()">Tăng (+10) stepUp</button>
    <button onclick="decValue()">Giảm (-10) stepDown</button>
    <script>
        function incValue() { document.getElementById("numInput").stepUp(10); }
        function decValue() { document.getElementById("numInput").stepDown(10); }
    </script>
</body>
</html>

Kết quả

Ban đầu:

Phương thức stepDown() của Input Number trong HTML DOM

Nhấn "Tăng (+10)" hoặc "Giảm (-10)":

Phương thức stepDown() của Input Number trong HTML DOM

Phương thức stepDown() của Input Number trong HTML DOM

💡 Ứng dụng: Tạo điều khiển số lượng giỏ hàng (+/-), bộ lọc giá, nhập liệu nhanh. Kết hợp step attribute để đổi bước nhảy (VD: step="0.5" cho điểm số, step="100" cho tiền VNĐ).