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

JavaScript में टेक्स्टबॉक्स का मान कैसे प्रदर्शित करें


टेक्स्ट बॉक्स से मान निकालने के लिए value का उपयोग करें और पैराग्राफ में innerHTML से प्रदर्शित करें।

उदाहरण

कोड निम्न है:

<!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 एडिटर में "Open with Live Server" विकल्प चुनें।

आउटपुट

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

JavaScript में टेक्स्टबॉक्स का मान कैसे प्रदर्शित करें

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

JavaScript में टेक्स्टबॉक्स का मान कैसे प्रदर्शित करें

बटन पर क्लिक करने के बाद, आउटपुट निम्न है:

JavaScript में टेक्स्टबॉक्स का मान कैसे प्रदर्शित करें


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

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

  1. JavaScript ऑब्जेक्ट को स्ट्रिंग फॉर्मेट में कैसे डिस्प्ले करें? JavaScript ऑब्जेक्ट को स्ट्रिंग फॉर्मेट में कैसे डिस्प्ले करें?

    उदाहरण document.getElementById() और innerHTML का उपयोग करके ऑब्जेक्ट डिस्प्ले करें। <!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> <

  1. JavaScript में HTML फॉर्म वैल्यूज़ प्राप्त करके कंसोल पर डिस्प्ले करें JavaScript में HTML फॉर्म वैल्यूज़ प्राप्त करके कंसोल पर डिस्प्ले करें

    उदाहरण value प्रॉपर्टी का उपयोग करके इनपुट फील्ड की वैल्यू प्राप्त करें। <!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> <body>