हम दो बटन बनाएंगे, एक इंक्रीमेंट के लिए और दूसरा डिक्रीमेंट के लिए -
-
Increment (+) पर क्लिक करने पर, उपयोगकर्ता इनपुट प्रकार संख्या में संख्या बढ़ा सकेगा
-
डिक्रीमेंट (-) पर क्लिक करने पर यूजर इनपुट टाइप नंबर में नंबर को घटा सकेगा
उदाहरण
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=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> उपरोक्त प्रोग्राम को चलाने के लिए, फ़ाइल का नाम "anyName.html(index.html)" सहेजें और फ़ाइल पर राइट क्लिक करें। वीएस कोड संपादक में "ओपन विद लाइव सर्वर" विकल्प चुनें।
आउटपुट
यह निम्नलिखित आउटपुट उत्पन्न करेगा -
अगर आप बटन इंक्रीमेंट (+) पर क्लिक करते हैं तो यह 1 जोड़ देगा। डिक्रीमेंट (-) पर क्लिक करने पर 1 घटाया जाएगा।
यहाँ, मैं + बटन का उपयोग करने जा रहा हूँ।
यह निम्नलिखित आउटपुट उत्पन्न करेगा -
