Posts

Showing posts from April, 2021

Javascript Code Change Button Properties onchange Event

<html> <head> Javascript Events</head> <style> .btn{    width:200px;    height:200px;    } </style> <body> <h2> Enter color</h2> <input type="text" id="input1" />  <h2> Enter number</h2> <input type="number" id="input2" onchange="onchangeevent()"/> <br><br> <input class="btn" type="button" id="display1" > <script> <!-- function onchangeevent() { document.getElementById("input2");                 n=document.getElementById("input2").value;                  c=String(document.getElementById("input1").value);                                   document.getElementById("display1").style.background=c;                       doc...
Post a Comment
Read more

Javascript Code : Change body Background onload using Random Values and Switch Case

html> <head>Javascript Events</head> </br> <body id="bodybg" onload="window.alert('Page successfully loaded');"> <script> <!-- n=Math.floor(Math.random()*10); document.write("The page is loaded successfully" +n); switch(Number(n)) {    case 1:document.body.style.background="pink"; break;    case 2:document.body.style.background="red"; break;   case 3:document.body.style.background="maroon"; break;    case 4:document.body.style.background="brown"; break; case 5:document.body.style.background="yellow"; break;    case 6:document.body.style.background="orange"; break; case 7:document.body.style.background="green"; break;    case 8:document.body.style.background="blue"; break; case 9:document.body.style.background="gray"; break;    default:document.body.style.background="aqua"; break; }   //--> </script> </b...
Post a Comment
Read more

Change Background Color using onkeydown keyboard event

<html> <head> Javascript Events</head> <body> <h2> Enter something here</h2> <input type="text" id="input1" onkeydown="keydownevent()"/>  <p id="display1"> <p id="display2"> <p id="display3"> <p id="display4"> <p id="display5"> <script> <!-- function keydownevent() { document.getElementById("input1");                 n=document.getElementById("input1").value;                 document.getElementById("display1").style.color="white";                   switch(Number(n))                  {                     case 1: document.getElementById("display1").style.background="pink";                       document.getElementByI...
Post a Comment
Read more

Javascript Code Change Background Color onkeydown Event

<html> <head> Javascript Events</head> <body> <h2> Enter a number </h2> <input type="text" id="input1" onkeydown="keydownevent()"/>  <p id="display"> <script> <!-- function keydownevent() { document.getElementById("input1");                 n=document.getElementById("input1").value;                 document.getElementById("display").style.color="white";                   switch(Number(n))                  {                     case 1: document.getElementById("display").style.background="pink";                       document.getElementById("display").innerHTML="pink";                    ...
Post a Comment
Read more

Change CSS Style using Mouse Events

<html> <head>  <h1> Javascript Events </h1> </head> <body> <script language="Javascript" type="text/Javascript"> <!-- function mouseoverevent() {                 document.getElementById("p2").style.color = "blue"; }         function mouseoutEvent() { alert("This is MouseOut");                 document.getElementById("p2").style.color = "red"; }  function mousedownEvent() { alert("This is Mousedownt");                 document.getElementById("p2").style.color = "violet"; } //--> </script> <p id="p2" onmouseover="mouseoverevent()"  onmouseout="mouseoutEvent()" onmousedown="mousedownEvent()" > Keep cursor over me</p> </body> </html> Output :    Javascript Events Keep cursor over me
Post a Comment
Read more

Javascript Output Add and Remove Item from Select Box

JavaScript Selected Value Add Products : Add Price : Add Product List: Apple Banana Remove Product
Post a Comment
Read more

Create a Select Box , Add and Remove Value on a List Box

View output <!DOCTYPE html> <html> <head>     <title>JavaScript Selected Value</title>     <style> //format and styles        div {         margin-bottom: 10px;       }       label {         display: inline-block;         width: 200px;       }       fieldset {         width:30%;         background: #e1eff2;       }       legend {         padding: 20px 0;         font-size: 20px;       }   p{         display: inline-block;         width: 1000px;        }    .btn {   color:white;   display: block;   width: 40%;   border: none;   background-color:blue;   padding: 14px...
Post a Comment
Read more

Javascript Switch Case samples and lecture notes

Post a Comment
Read more

Javascript Output Display PriceList and Compute Total Amount Due

Form Elements and Conditional Statements Click to View The Javascript Programs Code Determine Scholarship Grants Enter your details : Enter your name Enter your order code [a apple Tea ] b[banana tea ] c [cherry tea ] Enter quantity Click to View The Javascript Programs Code
Post a Comment
Read more

Javascript Code sample using Switch Case to Create Pricelist and compute Total Amount Due

 <!DOCTYPE html> <html>  <head>     <title>Form Elements and Conditional Statements </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;       }   p{         display: inline-block;         width: 1000px;        }     </style>   </head> <body> Click to View the Output <h1>Determine Scholarship Grants </h1> <p>Enter your details :...
Post a Comment
Read more

Javascript Output Determine if the grade is qualified for Scholarship using switch case

Form Elements and Conditional Statements Determine Scholarship Grants Enter your details : Enter your name Enter your average grade Click to View the Code
Post a Comment
Read more

javascript switch case sample 3 Determine if grade is qualified for Scholarship

 <!DOCTYPE html> <html>  <head>     <title>Form Elements and Conditional Statements </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;       }   p{         display: inline-block;         width: 1000px;        }     </style>   </head> <body> <h1>Determine Scholarship Grants </h1> <p>Enter your details : </p> <fieldset...
Post a Comment
Read more

Javascript Switch case with input characters - Output

Click to see the Javascript Code
Post a Comment
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   
Post a Comment
Read more

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...
Post a Comment
Read more