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

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

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

Cú pháp

numberInput.stepUp(number)

number (tùy chọn): Số lượng muốn tăng. Mặc định = step attribute.

Ví dụ: Tăng/giảm số (cùng demo stepDown)

<!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 stepUp() của Input Number trong HTML DOM

Nhấn các nút tăng/giảm:

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

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

✅ Mẹo: stepUp(n) và stepDown(n) tuân thủ min, max, step. Vượt giới hạn sẽ dừng tại min/max. Dùng cho UI tăng/giảm số lượng, tuổi, điểm...