Get HTML Tag Values With JavaScript

Introduction

 
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 a 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 on your single line of code with the help of //, i.e., two forward slashes. 
 
Example
  1. //Javascript can also run only writing a SCRIPT tag.   

Multi-line comment

 
This will comment on your multi-line of code with the 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 a client-side scripting language that runs on the client browser. Using client-side validation reduces the load on the 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
  • The user entered text or not, in the textbox.
  • Can put restriction; only alphabet characters allowed in
  • Minimum Length requirement.
Mobile field textbox
  • The user entered or not, in the textbox.
  • Can put restriction; only numeric character allowed in the textbox.
  • Minimum length requirement.
Birth-Date field textbox
  • Valid date entered or not, in the textbox.
  • Date format restriction.
Gender dropdownlist
  • User-selected or not.
  • Hide or display item.

How to pass the parameter into a JavaScript function?

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

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 the element.
 
innerHTML: To get and set change text of the element.
 
NOTE
 
My suggestion is that content elements content (inner text) can be get/set with the 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 the 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 the click event of the button, go through sample code.
 
CODE
  1. <  
  2. !DOCTYPE html >  
  3.  <html >  
  4.  <head >  
  5.  <meta http - equiv = "Content-Type"  
  6. content = "text/html; charset=utf-8" / >  
  7.  <title > Sum Example < /title>   <  
  8.  script type = "text/javascript" >  
  9.  function CalcAdd() {  
  10.   document.getElementById("title").innerText = "Welcome to JavaScript";  
  11.  }  
  12.   
  13.  </script>    
  14.  </head>    
  15.  <body >  
  16.  <h1 id = "title" > Welcome To Tutorials < /h1>   <  
  17.  br / >  
  18.  <br / >  
  19.  <input type = "button"  
  20. name = "clickbtn"  
  21. value = "On Click Title Will Change"  
  22. onClick = "CalcAdd()" / >  
  23.  </body>    
  24.  </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>   
OUTPUT ON LOAD
 
JavaScript
 
OUTPUT AFTER SUBMIT 
 
JavaScript
 
Happy Coding…