Question Bank - Event driven JavaScript Programs
1. Write Event driven JavaScript Code to accept 3 numbers and display average of
the numbers. (Average = n1 + n2 + n3 / 3).
<!doctype html>
<html>
<head>
<title> average</title>
<script type="text/javascript">
function average()
{
var n1,n2,n3,av;
n1=parseInt([Link]('t1').value);
n2=parseInt([Link]('t2').value);
n3=parseInt([Link]('t3').value);
av=(n1+n2+n3)/3;
[Link]("Average of the entered numbers is " + av);
}
</script>
</head>
<body>
<form name="f1">
Enter first number <input type="text" id="t1"> <br>
Enter second number <input type="text" id="t2"> <br>
Enter third number <input type="text" id="t3"> <br>
<input type="button" value="Click here" > </form>
</body>
</html>
2. Write Event driven JavaScript Code to display multiplication and reminder of 2
accepted numbers when the mouse is moved over the button.
<!doctype html>
<html>
<head>
<title> multiply </title>
<script type="text/javascript">
function mul()
{
var n1,n2,mul,rem;
n1=parseInt([Link]('t1').value);
n2=parseInt([Link]('t2').value);
mul=n1*n2;
rem=n1%n2;
[Link]("Multiplication of the entered numbers is " + mul + "<br>");
[Link]("Remainder of the entered numbers is " + rem);
}
</script>
</head>
<body>
<form name="f1">
Enter first number <input type="text" id="t1"> <br>
Enter second number <input type="text" id="t2"> <br>
<input type="button" value="Answer" > </form>
</body>
</html>
3. Write Event driven JavaScript Code to display addition and subtraction of 2
accepted numbers when the mouse is moved over the button.
<!doctype html>
<html>
<head>
<title> add</title>
<script type="text/javascript">
function add()
{
var n1,n2,add,sub;
n1=parseInt([Link]('t1').value);
n2=parseInt([Link]('t2').value);
add=n1+n2;
sub=n1-n2;
[Link]("Multiplication of the entered numbers is " + add + "<br>");
[Link]("Remainder of the entered numbers is " + sub);
}
</script>
</head>
<body>
<form name="f1">
Enter first number <input type="text" id="t1"> <br>
Enter second number <input type="text" id="t2"> <br>
<input type="button" value="Answer" > </form>
</body>
</html>
4. Write Event driven JavaScript Code to accept 3 numbers and display addition
and multiplication of the numbers.
<!doctype html>
<html>
<head>
<title> add</title>
<script type="text/javascript">
function add()
{
var n1,n2,add,mul;
n1=parseInt([Link]('t1').value);
n2=parseInt([Link]('t2').value);
add=n1+n2;
mul=n1*n2;
[Link]("Addition of the entered numbers is " + add + "<br>");
[Link]("Multiplication of the entered numbers is " + mul);
}
</script>
</head>
<body>
<form name="f1">
Enter first number <input type="text" id="t1"> <br>
Enter second number <input type="text" id="t2"> <br>
<input type="button" value="Answer" > </form>
</body>
</html>
5. Write Event driven JavaScript Code to display square of a number using built-in
function of Math object.
<!doctype html>
<html>
<head>
<title> math</title>
<script type="text/javascript">
function square()
{
var n,ans;
n=parseInt([Link]('num').value);
ans= [Link](n,2);
[Link]("Square of the entered number is " + ans);
}
</script>
</head>
<body>
<form name="f1">
Enter a number <input type="text" id="num"> <br>
<input type="button" value="Answer" > </form>
</body>
</html>
6. Write Event driven JavaScript Code to display square and cube of the accepted
number on click of a button.
<!doctype html>
<html>
<head>
<title> square cube</title>
<script type="text/javascript">
function sqrcube()
{
var n,square,cube;
n=parseInt([Link]('num').value);
square=n*n;
cube=n*n*n
[Link]("Square of the entered number is " + square + "<br>");
[Link]("Cube of the entered number is " + cube);
}
</script>
</head>
<body>
<form name="f1">
Enter a number <input type="text" id="num"> <br>
<input type="button" value="Answer" > </form>
</body>
</html>
7. Write Event driven JavaScript Code to display square of the accepted number
when the mouse is moved over the button.
<!doctype html>
<html>
<head>
<title> square</title>
<script type="text/javascript">
function sqr()
{
var n,square;
n=parseInt([Link]('num').value);
square=n*n;
[Link]("Square of the entered number is " + square);
}
</script>
</head>
<body>
<form name="f1">
Enter a number <input type="text" id="num"> <br>
<input type="button" value="Answer" > </form>
</body>
</html>
8. Write Event driven JavaScript Code to display area of circle. Accept radius of
circle from the user. (Area=3.14 * r * r).
<!doctype html>
<html>
<head>
<title>circle</title>
<script type="text/javascript">
function circ()
{
var r,area;
r=parseInt([Link]('num').value);
area=3.14*r*r;
[Link]("Area of circle = " + area);
}
</script>
</head>
<body>
<form name="f1">
Enter radius <input type="text" id="num"> <br>
<input type="button" value="Answer" > </form>
</body>
</html>
9. Write Event driven JavaScript Code to display area of triangle. Accept Base and
Height from the user.
<!doctype html>
<html>
<head>
<title>triangle</title>
<script type="text/javascript">
function tri()
{
var b,h,area;
b=parseInt([Link]('base').value);
h=parseInt([Link]('height').value);
area=0.5*b*h;
[Link]("Area of triangle = " + area);
}
</script>
</head>
<body>
<form name="f1">
Enter base <input type="text" id="base"> <br/>
Enter height <input type="text" id="height"> <br/>
<input type="button" value="Answer" > </form>
</body>
</html>
10. Write Event driven JavaScript Code to display area of rectangle. Accept Length
and Breadth from the user. (Area=l * b).
<!doctype html>
<html>
<head>
<title>rect</title>
<script type="text/javascript">
function rect()
{
var l,b,area;
l=parseInt([Link]('length').value);
b=parseInt([Link]('breadth').value);
area=l*b;
[Link]("Area of rectangle = " + area);
}
</script>
</head>
<body>
<form name="f1">
Enter length <input type="text" id="length"> <br/>
Enter breadth <input type="text" id="breadth"> <br/>
<input type="button" value="Answer" > </form>
</body>
</html>
11. Write Event driven JavaScript Code to display perimeter of square. Accept side
value from the user. (Perimeter=4 * s).
<!doctype html>
<html>
<head>
<title>square</title>
<script type="text/javascript">
function square()
{
var s,peri;
s=parseInt([Link]('side').value);
peri=4*s;
[Link]("Perimeter of square = " + peri);
}
</script>
</head>
<body>
<form name="f1">
Enter side <input type="text" id="side"> <br/>
<input type="button" value="Answer" > </form>
</body>
</html>
12. Write Event driven JavaScript Code to display circumference of a circle. Accept
radius from the user. (Circumference=2 * 3.14 * r).
<!doctype html>
<html>
<head><title>circle</title>
<script type="text/javascript">
function circle()
{
var s,cir;
r=parseInt([Link]('radius').value);
cir=2*3.14*r;
[Link]("Circumference of circle = " + cir);
}
</script></head>
<body>
<form name="f1">
Enter radius <input type="text" id="radius"> <br/>
<input type="button" value="Answer" > </form>
</body>
</html>
13. Write Event driven JavaScript Code to display whether an accepted number is
even or odd.
<!doctype html>
<html>
<head>
<title>circle</title>
<script type="text/javascript">
function oddev()
{
var n;
n=parseInt([Link]('num').value);
if(n%2==0)
[Link](n + " is even number");
else
[Link](n + " is odd number");
}
</script>
</head>
<body>
<form name="f1">
Enter number <input type="text" id="num"> <br/>
<input type="button" value="Answer" > </form>
</body>
</html>
14. Write Event driven JavaScript Code to accept age and display message “hello”
if age is greater than 20.
<!doctype html>
<html>
<head>
<title>hello</title>
<script type="text/javascript">
function hello()
{
var age;
age=parseInt([Link]('num').value);
if(age>=20)
[Link]("Hello");
else
[Link]("Age less than 20 is an invalid input");
}
</script>
</head>
<body>
<form name="f1">
Enter age <input type="text" id="num"> <br/>
<input type="button" value="Answer" > </form>
</body>
</html>
15. Write Event driven JavaScript Code to accept number and determine it is greater
than 100, less than 100 or equal to 100.
<!doctype html>
<html>
<head>
<title>number</title>
<script type="text/javascript">
function check()
{
var n;
n=parseInt([Link]('num').value);
if(n>100)
[Link](n + " is greater than 100");
else if(n<100)
[Link](n + " is less than 100");
else
[Link](n + " is equal to 100");
}
</script>
</head>
<body>
<form name="f1">
Enter number <input type="text" id="num"> <br/>
<input type="button" value="Answer" > </form>
</body>
</html>
16. Write Event driven JavaScript Code to accept 2 numbers and determine the
greater number.
<!doctype html>
<html>
<head>
<title>number</title>
<script type="text/javascript">
function check()
{
var n1,n2;
n1=parseInt([Link]('num1').value);
n2=parseInt([Link]('num2').value);
if(n1>n2)
[Link](n1 + " is the greater number");
else
[Link](n2 + " is the greater number");
}
</script>
</head>
<body>
<form name="f1">
Enter first number <input type="text" id="num1"> <br/>
Enter second number <input type="text" id="num2"> <br/>
<input type="button" value="Answer" > </form>
</body>
</html>
17. Write Event driven JavaScript Code to display numbers from 1 to 100 when
mouse is moved over a button.
<!doctype html>
<html>
<head>
<title>number</title>
<script type="text/javascript">
function check()
{
var n;
for(n=1; n<=100; n++)
[Link](n + " ");
}
</script>
</head>
<body>
<form name="f1">
<input type="button" value="Display numbers" > </form>
</body>
</html>
18. Write Event driven JavaScript Code to display table of an accepted number.
(E.g. 2 x 1 = 2 2 x 2 = 4)
<!doctype html>
<html>
<head>
<title>number</title>
<script type="text/javascript">
function check()
{
var n,i,ans;
n=parseInt([Link]('num').value);
for(i=1;i<=10;i++)
{
ans=n*i;
[Link](n + "x" + i + "=" + ans + "<br>");
}
}
</script>
</head>
<body>
<form name="f1">
Enter a number <input type="text" id="num"> <br/>
<input type="button" value="Display" > </form>
</body>
</html>
19. Write Event driven JavaScript Code to display square of numbers from 2 to 10
on click of a button.
<!doctype html>
<html>
<head>
<title>number</title>
<script type="text/javascript">
function check()
{
var n;
for(n=2;n<=10;n++)
[Link](n*n + " ");
}
</script>
</head>
<body>
<form name="f1">
<input type="button" value="Display numbers" > </form>
</body>
</html>
20. Write Event driven JavaScript Code to display Factorial of accepted number. (For
e.g 4, 1x2x3x4=24).
<!doctype html>
<html>
<head>
<title>factorial of numbers</title>
<script language="javascript">
function fact()
{
var no=[Link]('num').value;
var i, fact;
i=1;
fact=1;
while(i<=no)
{
fact=fact*i;
i++
}
[Link]("Factorial of the entered number is "+fact);
}
</script>
</head>
<body>
<form name="form1">
<input type="number" name="num" id="num" placeholder="Enter the number to
find factorial"/>
<br/><br/>
<input type="button" value="Display Factorial" > </form>
</body>
</html>
21. Write Event driven JavaScript Code to display factorial of number 25 when
mouse is moved over a button.
<!doctype html>
<html>
<head>
<title>factorial of numbers</title>
<script language="javascript">
function fact()
{
var no=25;
var i, fact;
i=1;
fact=1;
while(i<=no)
{
fact=fact*i;
i++
}
[Link]("Factorial of the entered number is "+fact);
}
</script>
</head>
<body>
<form name="form1">
<input type="button" value="Display Factorial" > </form>
</body>
</html>
22. Write Event driven JavaScript Code to display sum of numbers from 150 to
1000 when mouse is moved over a button.
<!doctype html>
<html>
<head>
<title> Sum of the numbers from 150 to 1000 </title>
</head>
<body>
<form>
<input type="button" name="bt1" value="Place the mouse over the button"
> </form>
<br/>
<script language="javascript">
function sumnos()
{
var no;
var sum=0;
for(no=150;no<=1000;no++)
{
sum=sum+no;
}
[Link]("The sum of the numbers from 150 to 1000 is: " +sum);
}
</script>
</body>
</html>
23. Write Event driven JavaScript Code to display addition of numbers from 50 to
100 when mouse is moved over a button.
<!doctype html>
<html>
<head>
<title> Sum of the numbers from 50 to 100 </title>
</head>
<body>
<form>
<input type="button" name="bt1" value="Place the mouse over the button"
> </form>
<br/>
<script language="javascript">
function sumnos()
{
var no;
var sum=0;
for(no=50;no<=100;no++)
{
sum=sum+no;
}
[Link]("The sum of the numbers from 50 to 100 is: " +sum);
}
</script>
</body>
</html>
24. Write Event driven JavaScript Code to display odd numbers from 50 to 100.
<!doctype html>
<html>
<head>
<title> Odd numbers </title>
<script type="text/javascript">
function OddNos()
{
for(i=50;i<=100;i++)
{
if(i%2!=0)
[Link](i +"<br/>");
}
}
</script>
</head>
<body>
<input type="button" value="Display Odd Nos" > </body>
</html>
25. Write Event driven JavaScript Code to display two colors after every 2000
milliseconds when the mouse is moved over a button.
<!doctype html>
<html>
<head>
<title> color change</title>
<script type="text/javascript">
function red()
{
[Link]="red";
[Link]("blue()",2000);
}
function blue()
{
[Link]="blue";
[Link]("msg()",2000);
}
function msg()
{
[Link]="white";
alert("Background color changing stopped");
}
</script>
</head>
<body>
<h1>Background color changes after 2 seconds</h1>
<form name="f1">
<input type="button" value="Color change" ></form>
</body>
</html>
26. Write Event driven JavaScript Code to display length of the text “Information
Technology” on click of a button.
<!doctype html>
<html>
<head>
<title> length</title>
<script type="text/javascript">
function len()
{
var s="Information Technology";
[Link]("Length of the entered string is " + [Link]);
}
</script>
</head>
<body>
<form name="f1">
<input type="button" value="Click here" > </form>
</body>
</html>
27. Write Event driven JavaScript Code to display day of week for variable day=5.
If the value of the day is changed it should be displayed. Use Switch statement.
<!doctype html>
<html>
<head><title>switch</title>
<script type="text/javascript">
function wkday()
{
var n=parseInt([Link]("d").value);
switch(n)
{
case 1:
[Link]("Monday");
break;
case 2:
[Link]("Tuesday");
break;
case 3:
[Link]("Wednesday");
break;
case 4:
[Link]("Thursday");
break;
case 5:
[Link]("Friday");
break;
case 6:
[Link]("Saturday");
break;
case 7:
[Link]("Sunday");
break;
default:
[Link]("Enter other number");
}
}
</script></head>
<body>
<form name="f1">
Enter a number <input type="number" id="d"><br/><br/>
<input type="button" name="btn" value="Click" ></form>
</body>
</html>
