JavaScript Equivalent of cin

JavaScript equivalent of cin. Well from what i know is,there aren’t anything like that in JavaScript.

But we can build a simple text box which allow the User to pass the value into the text box. When the user click on the Submit button .The Input will be process and print out within the HTML paragraph tag.

In this Example i will code both the JavaScript and HTML in a single file , just for easy explanation.But in real time that should be a “No no ” as this is not a good practice to mess things up together.

Let Step into the code our JavaScript Equivalent of cin

Under the Code below. I will create a text box to hold the user input , a Submit button. And JavaScript Of Course to make it work.

1. As Usual create the Structure of our HTML file the Doc type, Header , Body.
2. Create a form tag
3. Alright , Let create a Header 2 tag name” Username” and create a paragraph tag to ask the user to input his or her Name
4. Create a input Text Box and give it an ID value “getTextValue” we will need this later to get the User input data in our JavaScript
5. Create a default text in the text box when no text is being enter placeholder=”My Name”
6. Now lets create our button , give it a value= “Submit”; assign an onclick event.This event will trigger the JavaScript when the button is being click.
7. Now create the Paragraph tag to output the Name when the Submit Button is being click.
8. Give your Paragraph tag an ID name called id=”outputText”
9. Now you are all set , let create the JavaScript to run this code. Start it by creating a Script tag with type=”text/javascript”
10. Create function inputText(value) which is link to the onclick=”inputText(this.value); at the Button tag
11. Get the Value from the User Input Text Box using document.getElementById(“getTextValue”).value and assign the user input into the value variable
12. Finally append or output the Value into the paragraph tag by using document.getElementById(“outputText”).innerHTML = “My name is ” + value;
13. Well we are done here give your self a pat, we have made it

<!DOCTYPE html>
<html>
<head>

</head>
  
    <body>
          <form>
                    <div>
                        <h2>Username</h2>
                        <P>Enter your Name :</P>
                        
                        <input type="text" id="getTextValue" name="username"  placeholder="My Name" >
                        
                       <input type="button" value="Submit" id="" onclick="inputText(this.value);"/>
                        
                        
                    </div>
    
                </form>
        
     
         <p id="outputText"> </p>
        
         <script type="text/javascript">
                   function inputText(value) {
                
                            value =document.getElementById("getTextValue").value
               
                            document.getElementById("outputText").innerHTML = "My name is " + value;
                   }
                
           </script>
         
    </body>
   
 
</html>

The output look as below

JavaScript Equivalent of cin — The output from the Code Above

Check out how to link external JavaScript document via HTML here
If you have any problem about JavaScript can always check out this community overhere

JavaScript Equivalent of cin

Let Step into the code our JavaScript Equivalent of cin

Leave a Comment Cancel reply