Computer >> कंप्यूटर >  >> प्रोग्रामिंग >> Javascript

जावास्क्रिप्ट में टेक्स्टबॉक्स का मूल्य कैसे प्रदर्शित करें?

<घंटा/>

मूल्य का उपयोग करके टेक्स्ट बॉक्स से मूल्य निकालें और आंतरिक HTML का उपयोग करके पैराग्राफ में प्रदर्शित कर सकते हैं।

उदाहरण

निम्नलिखित कोड है -

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<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>
<body>
   Enter your Name:
   <input type="text" placeholder="enter your name" id="txtInputData">
   <button onclick="displayName()">Click Me</button>
   <p id="show_name">
   </p>
</body>
<script>
   function displayName() {
      var originalName = document.getElementById("txtInputData").value;
      document.getElementById("show_name").innerHTML = "Your Name is :" + originalName;
   }
</script>
</html>

उपरोक्त प्रोग्राम को चलाने के लिए, फ़ाइल नाम "anyName.html(index.html)" को सेव करें। फ़ाइल पर राइट क्लिक करें और VSCode संपादक में "लाइव सर्वर के साथ खोलें" विकल्प चुनें -

आउटपुट

यह कंसोल पर निम्न आउटपुट उत्पन्न करेगा -

जावास्क्रिप्ट में टेक्स्टबॉक्स का मूल्य कैसे प्रदर्शित करें?

अब, टेक्स्ट बॉक्स में मान दर्ज करें और बटन पर क्लिक करें -

जावास्क्रिप्ट में टेक्स्टबॉक्स का मूल्य कैसे प्रदर्शित करें?

बटन पर क्लिक करने के बाद, आउटपुट इस प्रकार है -

जावास्क्रिप्ट में टेक्स्टबॉक्स का मूल्य कैसे प्रदर्शित करें?


  1. HTML फ़ाइल में JavaScript कैसे एम्बेड करें?

    HTML फ़ाइल में JavaScript एम्बेड करने के लिए निम्नलिखित कोड है - उदाहरण <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Documen

  1. मैं एक जावास्क्रिप्ट ऑब्जेक्ट की सामग्री को एक स्ट्रिंग प्रारूप में कैसे प्रदर्शित करूं?

    document.getElementById() का उपयोग करें और innerHTML का उपयोग करके प्रदर्शित करें। निम्नलिखित कोड है - उदाहरण <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initialscale=1

  1. HTML फॉर्म मान प्राप्त करना और जावास्क्रिप्ट में कंसोल पर प्रदर्शित करना?

    HTML प्रपत्र मान प्राप्त करने के लिए, मान गुण का उपयोग करें। मान लें कि निम्नलिखित हमारा इनपुट प्रकार है - <input type="text" id="getValues" value="My Name is John Smith" /> हमें कंसोल पर उपरोक्त मान माई नेम इज जॉन स्मिथ प्रदर्शित करने की आवश्यकता है। उदाहरण <