Get HTML Tag Values With JavaScript

In this article, you will learn how JavaScript interacts with HTML. Through this article, you will get the answers to the following questions. 

  • What is JavaScript?
  • What is the use of JavaScript (JS)?
  • How to enable JavaScript?
  • How to comment in JavaScript?
  • Why JavaScript validation (client side) required?
  • How to pass the parameter into a JavaScript function?
  • How to get and set HTML element value in JavaScript?
  • <p>, <div> and <input type=”????”/>
  • Sample Member Form

What is JavaScript?

JavaScript is weakly typed, object-oriented, and dynamic language. It's lightweight and all modern browsers are built in a JavaScript engine.

Please visit JavaScript wiki page for more detail - https://en.wikipedia.org/wiki/JavaScript

JS is shortcut / short name of Javascript.

What is the use of JavaScript (JS)?

JS is used for interacting and manipulation with DOM (Document Object Model) elements.  It is mostly used for interaction with client-side objects. You can get and set the values of DOM objects easily and the beauty of JS is that there is no additional plugin or extension required to implement or uses for JS.

How to enable JavaScript?

Mostly in <head> section or other section of HTML or web document, we need to just write <script> tag, JavaScript is ready to use. Nowadays, Visual Studio also provides IntelliSense for JavaScript (JS).

Example

  1. <html>  
  2.   
  3. <head>  
  4.     <script type="text/JavaScript">  
  5.         //commenting single line  
  6.         /* Multi line comment. 
  7.          document.write("this will not execute.") 
  8.          document.write("this will not execute.") 
  9.         */  
  10.     </script>  
  11.     <script>  
  12.         //JavaScript can also run only writing SCRIPT tag.  
  13.     </script>  
  14. </head>  
  15.   
  16. <body> </body>  
  17.   
  18. </html>  

You can start coding in JavaScript by just adding <script> tag or <script type=”text/JavaScript”>.

How to comment in JavaScript?

The majority of all languages have two types of comments:

  1. Single line comment.
  2. Multi-line comment.
Single line comment

This will comment your single line of code with help of //, i.e., two forward slashes. 

Example

  1. //Javascript can also run only writing SCRIPT tag.  
Multi-line comment

This will comment your multi-line of code with help of /* */, i.e., two forward slashes with an asterisk at their inner side.
  1. /* Multi line comment. 
  2.          document.write("this will not execute.") 
  3.          document.write("this will not execute.") 
  4.  */  

JavaScript

Why JavaScript validation (client side) required?

JavaScript is client-side scripting language which runs on the client browser. Using client side validation reduces the load on server side and reduces unnecessary round-trips.

You can validate all types of DOM objects with JavaScript.

Example
JavaScript

The above can be validated with JavaScript client-side with the following points. 

Name field textbox

  • User entered text or not, in textbox.
  • Can put restriction; only alphabet characters allowed in
  • Minimum Length requirement.

Mobile field textbox

  • User entered  or not, in textbox.
  • Can put restriction; only numeric character allowed in textbox.
  • Minimum length requirement.

Birth-Date field textbox

  • Valid date entered or not, in textbox.
  • Date format restriction.

Gender dropdownlist

  • User selected or not.
  • Hide or display item.

How to pass the parameter into JavaScript function?

Parameter is the value which is used inside the function to do the processing. Passing the parameter(s) to JavaScript function is very simple. In the sample code, you will see this in details.

Function without Parameter

Syntax

  1. function <function name>  
  2. {}  

Example

  1. function setclass()  
  2. {} 

Function with Parameter

Syntax

  1. function <function name>(parameter1 , parameter2 . .. . .)  
  2. {  
  3.     
  4. }  

Example

  1. function SumVal(val1, val2)  
  2. {  
  3.    return val1 + val2 ;  
  4. }  

How to get and set HTML element value in javascript?

<h1>, <p>, <div> and other content tag

To change contents of H1, P and DIV and content tags can be possible through  (innerText, innerHtml).

innerText : To get and set change text of element.

innerHTML: To get and set change text of element.

NOTE

My suggestion is that content elements content (inner text) can be get/set with help of INNERTEXT , INNERHTML.

FORM control element value can be get/set with help of VALUE.

Change the content of <H1> tag

In this we are going to change the contents of <H1> tag with help of innerText of JavaScript. 

  1. <h1 id="title">Welcome To Tutorials</h1>  

To get Value of H1 Tag

  1. Alert(document.getElementById("title").innerText);

To set Value of H1 Tag

  1. document.getElementById("title").innerText = "Welcome to JavaScript";  

We had called click event of button, go through sample code.

CODE

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>Sum Example</title>  
  6. <script type="text/javascript">  
  7. function CalcAdd() {  
  8.         document.getElementById("title").innerText = "Welcome to JavaScript";  
  9.  }  
  10.   
  11. </script>  
  12. </head>  
  13. <body>  
  14.     <h1 id="title">Welcome To Tutorials</h1>  
  15. <br/>  
  16. <br/>  
  17. <input type="button" name="clickbtn" value="On Click Title Will Change" onClick="CalcAdd()"/>  
  18. </body>  
  19. </html>  

OUTPUT

ON LOAD VIEW

JavaScript

AFTER CLICKED ON BUTTON

JavaScript

Change the content of <P> tag

In this we are going to change the contents of <P> tag with help of innerHTML of JavaScript, 

  1. <p id="para">First paragraph element of page.</p>  
  2. document.getElementById("para").innerHTML = "<b><i>Updated value of first paragraph </i></b>";  

CODE

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.     <title>P Tag Example</title>  
  6.     <script type="text/javascript">  
  7.         function CalcAdd() {  
  8.             //to set the P tag contents  
  9.             document.getElementById("para").innerHTML = "<b><i>Updated value of first paragraph </i></b>";  
  10.         }  
  11.   
  12.     </script>  
  13. </head>  
  14. <body>  
  15.     <p id="para">First paragraph element of page.</p>  
  16.     <br />  
  17.     <br />  
  18.     <input type="button" name="clickbtn" value="On Click Title Will Change" onClick="CalcAdd()" />  
  19. </body>  
  20. </html>  

OUTPUT

ON LOAD VIEW

JavaScript

AFTER CLICKED ON BUTTON

JavaScript

Change the content of <div> tag

In this we are going to change the contents of <P> tag with help of innerHTML of JavaScript, 

  1. <p id="para">First paragraph element of page.</p>  
  2. document.getElementById("para").innerHTML = "<b><i>Updated value of first paragraph </i></b>";  

OUTPUT

ON LOAD VIEW

JavaScript

AFTER CLICKED ON BUTTOn 

JavaScript   

Now we focus more on FORM CONTROL of HTML

Member Form CODE

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.     <title>Membership Form Example</title>  
  6.     <script type="text/JavaScript">  
  7.         function CalcAdd() {  
  8.             //to set the DIV tag contents  
  9.             document.getElementById("pMemberName").innerText= document.getElementById("txtMemberName").value;  
  10.             document.getElementById("pMemberMobile").innerText = document.getElementById("txtMemberMobile").value;  
  11.             document.getElementById("pMemberBirthDate").innerText = document.getElementById("txtMemberBirthDate").value;  
  12.             document.getElementById("pMemberGender").innerText = document.getElementById("ddlGender").options[document.getElementById("ddlGender").selectedIndex].text;  
  13.             document.getElementById("pMemberMarried").innerText = document.querySelector('input[name = marry]:checked').value;  
  14.         }  
  15.     </script>  
  16.     <style>  
  17.         #tbl{  
  18.          border-collapse: collapse;  
  19.         border: 1px solid black;  
  20.         }  
  21.   
  22.     </style>  
  23. </head>  
  24. <body>  
  25.     <h1 id="mainTitle">Member Detail</h1>  
  26.     <br />  
  27.     <table>  
  28.         <tr>  
  29.             <td>  
  30.                Member Name  
  31.             </td>  
  32.             <td>  
  33.                 <input id="txtMemberName" type="text" />  
  34.             </td>  
  35.         </tr>  
  36.         <tr>  
  37.             <td>Mobile</td>  
  38.             <td><input id="txtMemberMobile" type="text" /></td>  
  39.         </tr>  
  40.         <tr>  
  41.             <td>Birth Date</td>  
  42.             <td><input id="txtMemberBirthDate" type="text" /></td>  
  43.         </tr>  
  44.         <tr>  
  45.             <td>Gender</td>  
  46.             <td>  
  47.                 <select id="ddlGender">  
  48.                     <option>Male</option>  
  49.                     <option>Female</option>  
  50.                 </select>  
  51.             </td>  
  52.         </tr>  
  53.         <tr>  
  54.             <td>Married</td>  
  55.             <td>  
  56.                 <input type="radio" name="marry" value="Yes Married">Yes<br>  
  57.                 <input type="radio" name="marry" value="Not Married" checked>No<br>  
  58.             </td>  
  59.         </tr>  
  60.         <tr>  
  61.             <td colspan="2" align="center">  
  62.                 <input type="button" name="clickbtn" value="Submit" onClick="CalcAdd()" style="font-size:19px;" />  
  63.             </td>  
  64.         </tr>  
  65.     </table>  
  66.     <br />  
  67.     <br />  
  68.       
  69.     <table id="tbl" >  
  70.         <tr>  
  71.             <td>  
  72.                 <b> Member Name -----></b>  
  73.             </td>  
  74.             <td>  
  75.                 <p id="pMemberName"></p>  
  76.             </td>  
  77.         </tr>  
  78.         <tr>  
  79.             <td><b>Mobile -----></b></td>  
  80.             <td><p id="pMemberMobile"></p></td>  
  81.         </tr>  
  82.         <tr>  
  83.             <td><b>Birth Date -----></b></td>  
  84.             <td><p id="pMemberBirthDate" > </p></td>  
  85.         </tr>  
  86.         <tr>  
  87.             <td><b>Gender -----></b></td>  
  88.             <td><p id="pMemberGender"></p></td>      
  89.         </tr>  
  90.         <tr>  
  91.             <td><b>Married Status -----></b></td>  
  92.             <td><p id="pMemberMarried"></p></td>  
  93.         </tr>  
  94.     </table>  
  95.   
  96. </body>  
  97. </html>  

OUT PUT ON LOAD

JavaScript

OUTPUT AFTER SUBMIT 

JavaScript

Happy Coding…