Javascript Code using getElementById and If Else Statement
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Form Elements and Attributes </title> | |
| <style> //format and styles | |
| div { | |
| margin-bottom: 10px; | |
| } | |
| label { | |
| display: inline-block; | |
| width: 200px; | |
| } | |
| fieldset { | |
| background: #e1eff2; | |
| } | |
| legend { | |
| padding: 20px 0; | |
| font-size: 20px; | |
| } | |
| </style> | |
| <body> | |
| <body> | |
| <h1>Determine Age Group </h1> | |
| <p>Enter your details : </p> | |
| <fieldset> | |
| <label>Enter your name </label> | |
| <input type="text" onfocus="this.value=''" name="fname" id="fname" value="" /> <br> <!-- create input text box for name --> | |
| <label>Enter your age </label> | |
| <input type="number" onfocus="this.value=''" name="age" id="age" value="" /> <br> <!-- create input text box for age --> | |
| <button onclick="display()" name="Display" id="display" value="Display" > Display </button> <!--button will call display function in javascript --> | |
| </fieldset> | |
| <p id="demo"></p> <!--paragraph where name and age will display --> | |
| <p id="demo2"></p> <!--paragraph where remarks will display --> | |
| <script> | |
| function display() | |
| { | |
| fname=document.getElementById("fname").value; //get the input name in the textbox fname | |
| age=document.getElementById("age").value; //get the input age in the textbox age | |
| document.getElementById("demo").innerHTML = "Name " + fname + "<br> Age :" +age; // display name and age in the paragraph demo... | |
| if(age<=12) //if age is 12 and below children group | |
| remarks = "<font color=violet> Children Group " ; | |
| else if(age<=19) //if age is 13-19 teen age group | |
| remarks = " <font color=red> Teen Age Group " ; | |
| else if(age<=59) //if age is 20-59 adult group | |
| remarks = "<font color=green> Adult Group " ; | |
| else //age from 60 and above senior citizen group | |
| remarks = "<font color=blue> Senior Citizen Group </font>" ; | |
| document.getElementById("demo2").innerHTML = "<br> Remarks :" +remarks; //display the remarks in another paragraph demo2 | |
| } | |
| </script> | |
| </body> | |
| </html> |
Determine Age Group
Enter your details :
Comments
Post a Comment