मान लें कि निम्नलिखित हमारा बटन है -
<button type="button" onclick="addTheValue(10)">Sum </button> </body>
हम बटन क्लिक पर पैरामीटर 10 के साथ addTheValue(10) फ़ंक्शन को कॉल कर रहे हैं। बटन पर क्लिक करने पर, हम नीचे दिए गए कोड के अनुसार 10 का मान जोड़ रहे हैं -
उदाहरण
<!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> <p> <h1> Adding 10 each time whenever you click the Sum Button......</h1> </p> <b id="firstValue">10</b> <button type="button" onclick="addTheValue(10)">Sum </button> <script> function addTheValue(secondValue) { var fValue = document.getElementById("firstValue"); firstValue.innerHTML = parseInt(fValue.innerHTML) + parseInt(secondValue); } </script> </body> </html>
उपरोक्त प्रोग्राम को चलाने के लिए, फ़ाइल नाम "anyName.html(index.html)" को सेव करें और फ़ाइल पर राइट क्लिक करें। वीएस कोड संपादक में "लाइव सर्वर के साथ खोलें" विकल्प चुनें।
यह निम्नलिखित आउटपुट देगा -
अब, मैं पहली बार “योग” बटन पर क्लिक करने जा रहा हूँ।
यह निम्नलिखित आउटपुट देगा -