जावास्क्रिप्ट में यूज़र इनपुट से नंबर प्राप्त करें और कंसोल में प्रदर्शित करें

परिचय

जावास्क्रिप्ट में यूज़र इनपुट से नंबर प्राप्त करने के लिए, document.querySelector() का उपयोग करके इनपुट एलिमेंट का चयन करें, उसके .value प्रॉपर्टी को एक्सेस करें, और parseInt() या parseFloat() का उपयोग करके स्ट्रिंग को नंबर में परिवर्तित करें।

उदाहरण

<!DOCTYPE html> <html lang="hi"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>यूज़र इनपुट नंबर</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> </head> <body> <div class="container container-fluid"> <p><strong> उदाहरण:</strong> 1 से 100 के बीच एक संख्या चुनें</p> <form> <div class="form-group"> <label for="number">एक संख्या दें:</label> <input id="inputNumber" value="" type="text" name="number" /> </form> <p id="output"></p> </div> <button class="btn btn-dark" id="choose" type="button">क्लिक करें</button> </body> <script> function example() { const btn = document.querySelector("#choose"); const randomNumber = Math.ceil(Math.random() * 100); btn.onclick = function() { const givenNumber = document.querySelector("#inputNumber").value; const valueInt = parseInt(givenNumber, 10); // रेडिक्स 10 निर्दिष्ट करें console.log('रैंडम नंबर:', randomNumber, 'दिया गया नंबर:', givenNumber); document.getElementById('output').textContent = `आपने दर्ज किया: ${givenNumber}, रैंडम: ${randomNumber}`; }; } example(); </script> </html>

आउटपुट

मान जोड़ने पर:

"क्लिक करें" बटन पर क्लिक करने पर, वही कंसोल में दिखाई देता है:

चलाने के निर्देश

उपरोक्त प्रोग्राम को चलाने के लिए, फ़ाइल का नाम anyName.html (index.html) सेव करें और फ़ाइल पर राइट-क्लिक करके VS कोड एडिटर में "Open with Live Server" विकल्प चुनें।

सर्वोत्तम अभ्यास

• हमेशा parseInt(str, 10) में रेडिक्स (10) निर्दिष्ट करें
• फ्लोटिंग पॉइंट के लिए parseFloat() का उपयोग करें
• Number() कंस्ट्रक्टर भी काम करता है लेकिन स्ट्रिक्टर है
• NaN जांच: isNaN(value) या Number.isNaN()
• <input type="number"> का उपयोग बिल्ट-इन वैलिडेशन के लिए करें