• Mohammed Niyas

Collect input and Print result in JavaScript - Exercises 1 - Level : Beginners

What you are going to do?

Write a JavaScript program to collect name in HTML input and print name with hello

Example: Input = Niyas

Result = Hello Niyas

What you will learn?

  1. How to catch input text value from an HTML input element?

  2. How to run JavaScript when button pressed?

  3. how to change inner text value of an HTML element?


How to catch input text value from an HTML input element?

HTML

<input type="Your Name" name="name" id="name" value="Your Name">

JavaScript

var givenName = document.getElementById("name").value; 

The Document method getElementById() returns an Element object representing the element whose id property matches the specified string


How to run JavaScript when button Pressed?

HTML

<button type="button" name="button" onclick="printname()">Click here</button>

JavaScript

function printname(){
  var giveName = document.getElementById("name").value;
}

How to change inner text of an HTML element

HTML

<label id="printHello"></label>

JavaScript

 document.getElementById("printHello").innerHTML = "Hello" + giveName;

Full Code:

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <label> Name : </label>
 <input type="Your Name" name="name" id="name" value="Your Name">
<button type="button" name="button" onclick="printname()">Click here</button>
 <label id="printHello"></label>
 <script src="app.js" charset="utf-8"></script>
  </body>
</html>

   

JavaScript

function printname(){
  var giveName = document.getElementById("name").value;
  document.getElementById("printHello").innerHTML = "Hello" + giveName;
}

Result:



38 views0 comments