HTML DOM Số đầu vào stepUp () Method

Phương thức stepUp () số đầu vào DOM tăng giá trị của trường số đầu vào lên một giá trị được chỉ định.

Cú pháp

Sau đây là cú pháp -

object.stepUp(number)

Đây, nếu số tham số bị bỏ qua sau đó nó tăng giá trị lên 1.

Ví dụ

Hãy để chúng tôi xem một ví dụ về phương thức số đầu vào HTML DOM stepUp () -

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM stepUp()/stepDown() Demo</title>
<style>

   body{
      text-align:center;
      background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%)
      center/cover no-repeat;
      height:100vh;
      color:#fff;
   }

   p{
      font-size:1.5rem;
   }

   input{
      width:40%;
   }

   button{
      background-color:#db133a;
      color:#fff;
      padding:8px;
      border:none;
      width:120px;
      margin:1rem;
      border-radius:50px;
      outline:none;
      cursor:pointer;
   }

</style>
</head>
<body>
<h1>stepUp()/stepDown() Method Demo</h1>
<p>Hi! How old are you?</p>
<input type="number">
<br>
<button onclick="incValue()">StepUp Value</button>
<button onclick="decValue()">StepDown Value</button>
<script>
   function incValue() {
      document.querySelector("input").stepUp(10);
   }
   function decValue() {
      document.querySelector("input").stepDown(10);
   }
</script>
</body>
</html>

Đầu ra

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

HTML DOM Số đầu vào stepUp () Method

Bây giờ, hãy nhấp vào “ StepUp Value” hoặc “Giá trị StepDown ”Để tăng hoặc giảm giá trị của trường số đầu vào.

HTML DOM Số đầu vào stepUp () Method