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>


Form Elements and Attributes

Determine Age Group

Enter your details :



Comments

Post a Comment

Popular posts from this blog

Javascript Code using Switch case and new Date() Functions , getDay() , getHours() , getMonth() , getFullYear() , getHours() , getMinutes()

Image
<!DOCTYPE html> <html> <body> <p id="demo"></p> <script> var day, month; switch (new Date().getDay()) {   case 0:     day = "Sunday";     break;   case 1:     day = "Monday";     break;   case 2:     day = "Tuesday";     break;   case 3:     day = "Wednesday";     break;   case 4:     day = "Thursday";     break;   case 5:     day = "Friday";     break;   case  6:     day = "Saturday"; } switch (new Date().getMonth()) {   case 0:     month = "January";     break;   case 1:     month = "February";     break;   case 2:     month = "March";     break;   case 3:     month = "April";     break;   case 4:     month = "May";     break;   case 5:     mont...
Read more

Javascript switch case with Input Characters

Image
 <!DOCTYPE html> <html> <body> <script>   grade=prompt("Enter your letter grade "); var result;   switch(grade){   case 'A': case 'a': result=" 99-100 Excellent";   break;   case 'B': case 'b': result="95-98 Very Good ";   break;   case 'C': case 'c': result="88-94 Good ";   break;  case 'D': case 'd': result=" 75-87 Needs Improvement ";   break;  case 'E': case 'e':  result="74 below Failed  ";   break;  default:   result="Invalid Grade ";   }   document.write(result);   </script>   </body> </html> Sample OUtput :  Click here to View  and Try the  Output Screen Switch cAse   
Read more