#20 Taking Input from user in JavaScript | TextBox



In this video tutorial we will learn how to take input from user from a HTML textbox using JavaScript.
We will be using the document object & its getElementById() method to access the HTML textbox which has assigned its unique ID. and then use the value properly to access the value inside the textbox.

Video by – Tanmay Sakpal
Simple Snippets Channel link – https://www.youtube.com/simplesnippets

31 thoughts on “#20 Taking Input from user in JavaScript | TextBox

  1. Can anyone please help me. I've been trying the same code but functions are not giving any output on my page. The buttonclick() function in the previous video and the fn1() function of this video too didn't give any output to me

  2. <script>

    function fn1()

    {

    var user = document.getElementById('text1').value;

    var pass = document.getElementById('text2').value;

    if (user==pass)

    {

    alert("Username and password match")

    }

    else {

    alert("Username and password don't match")

    }

    alert("Username is "+user)

    alert("pass is "+pass)

    }

    </script>

    <input placeholder="Username" id = "text1" style="color: red"> <br>

    <input type="password" placeholder="Enter password" id = "text2"> <br>

    <button id = "button1" onclick="fn1()"> Click me </button>

    I am just a beginner .. can someone tell me how to print user name and password together in the same line .. I want is done as follows :
    UserName is : … and Pass is : ….
    Thank You !! 😀

  3. I want to know that let we've created a website then , in input if they write their phone number then we can access it. Do we have to do it by writing console.log or we have to use php.

  4. Cannot add the .value inside the fn1 function.

    I can only add .nodeValue.

    It doesn't work when I use .nodeValue instead of .value.

    How do I work around this ?

    Pls help.

  5. How to link html h1 and JavaScript prompt.

    <html>
    <head>
    <title> Insert your name to see magic </title>
    </head>
    <body>
    <h1>Thariq</h1>
    <script>
    //Please tell how can I change the Thariq to name changeable input using prompt or any other.
    </script>
    </body>
    </html>

  6. Hi below code of comparing two strings are not working, can you help

    function fn() {

    var str1 = document.getElementById("uname").value

    var str2 = document.getElementById("uname").value

    if (str1 == str2)

    alert("Username & Password are same")

    else

    (str1 == str2)

    alert("Username & Password are not same!")

  7. <script>
    const dummyData = {
    "username":"karan",
    "pass":"abc123"
    }
    </script>
    <script type="text/javascript">
    function buttonClick()
    {
    var user = document.getElementById("username").value;
    var password = document.getElementById("pass").value;
    //alert("Match the username "+user+" Match the password "+password);
    if(user == dummyData.username && password != dummyData.pass)//if math the user name and password
    {
    alert("Pasword is not correct");
    }

    else if(user != dummyData.username && password == dummyData.pass)//if math the user name and password
    {
    alert("User name is not corrected");
    }
    else if(user == dummyData.username && password == dummyData.pass)//if math the user name and password
    {
    alert("User name and password both are matched");
    }
    else
    alert("User name and password does not match");
    }
    </script>

    </head>
    <body>
    <input type="text" id="username" placeholder="Username">
    <input type="password" id="pass" placeholder="password">

    <button onclick="buttonClick()">Click</button>

    </body>

Leave a Reply

Your email address will not be published. Required fields are marked *