কম্পিউটার টিউটোরিয়াল

জাভাস্ক্রিপ্টে টেক্সটবক্সের মান দেখানো

টেক্সট বক্স থেকে 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 অপশনটি নির্বাচন করুন।

আউটপুট

এটি নিচের আউটপুটটি দেবে:

জাভাস্ক্রিপ্টে টেক্সটবক্সের মান দেখানো

এখন টেক্সট বক্সে মান লিখে বাটনে ক্লিক করুন:

জাভাস্ক্রিপ্টে টেক্সটবক্সের মান দেখানো

বাটন ক্লিক করার পর আউটপুট:

জাভাস্ক্রিপ্টে টেক্সটবক্সের মান দেখানো

  1. জাভাস্ক্রিপ্ট আউটপুট টেক্সটবক্সে দেখান

  2. HTML ফাইলে জাভাস্ক্রিপ্ট এম্বেড করার পদ্ধতি

  3. জাভাস্ক্রিপ্ট অবজেক্টের কনটেন্ট স্ট্রিং ফরম্যাটে দেখানো

  4. জাভাস্ক্রিপ্টে HTML ফর্মের মান কনসোলে দেখানো