Scribd
Upload
28 views5 pages

FF F I ) Ii I - 1 Document - Getelementbyid ("Res") .Innerhtml "The Factorial of The Number " + I + " Is: " + F )

Here is the code to add images that change when clicking the forward and backward buttons: <script> var imageIndex = 0; var images = ["img1.jpg", "img2.jpg", "img3.jpg"]; function changeImage(direction) { if(direction == "next") { imageIndex++; if(imageIndex == images.length) { imageIndex = 0; } } else if(direction == "prev") { imageIndex--; if(imageIndex < 0) { imageIndex = images.length - 1; } } document.getElementById("image").src = images[imageIndex]; } </

Uploaded by

azlannisar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
28 views5 pages

FF F I ) Ii I - 1 Document - Getelementbyid ("Res") .Innerhtml "The Factorial of The Number " + I + " Is: " + F )

Here is the code to add images that change when clicking the forward and backward buttons: <script> var imageIndex = 0; var images = ["img1.jpg", "img2.jpg", "img3.jpg"]; function changeImage(direction) { if(direction == "next") { imageIndex++; if(imageIndex == images.length) { imageIndex = 0; } } else if(direction == "prev") { imageIndex--; if(imageIndex < 0) { imageIndex = images.length - 1; } } document.getElementById("image").src = images[imageIndex]; } </

Uploaded by

azlannisar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

ff 

= f * i;  
}  
ii = i - 1;    
document.getElementById("res").innerHTML = "The factorial of the number " + i + " is: " + f ;  
}  
</script>  
</body>  
</html>  

Q.2. (2
marks)
Write code in JavaScript. Text should change when you move cursor(hover) on City names such
as London, Paris and Tokyo.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body {font-family: "Lato", sans-serif;}

/* Style the tab */


.tab {
float: left;
border: 1px solid #ccc;
background-color: #f1f1f1;
width: 30%;
height: 300px;
}
/* Style the buttons inside the tab */
.tab button {
display: block;
background-color: inherit;
color: black;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
font-size: 17px;
}

/* Change background color of buttons on hover */


.tab button:hover {
background-color: #ddd;
}

/* Create an active/current "tab button" class */


.tab button.active {
background-color: #ccc;
}

/* Style the tab content */


.tabcontent {
float: left;
padding: 0px 12px;
border: 1px solid #ccc;
width: 70%;
border-left: none;
height: 300px;
display: none;
}

/* Clear floats after the tab */


.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>

<h2>Hover Tabs</h2>
<p>Move the mouse over a button inside the tabbed menu:</p>

<div class="tab">
<button class="tablinks" onmouseover="openCity(event, 'London')">London</button>
<button class="tablinks" onmouseover="openCity(event, 'Paris')">Paris</button>
<button class="tablinks" onmouseover="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" class="tabcontent">


<h3>London</h3>
<p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">


<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>

<div id="Tokyo" class="tabcontent">


<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>

<div class="clearfix"></div>

<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>

</body>
</html>
Q.3. (2
marks)
Write code in Javascript for creating new images in javascript with scroll backwards or scroll
forward functions. Images will change when you will click on forward or backward arrows

_____________________
________________________________________________________________
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
a{
text-decoration: none;
display: inline-block;
padding: 8px 16px;
}

a:hover {
background-color: #ddd;
color: black;
}

.previous {
background-color: #f1f1f1;
color: black;
}

.next {
background-color: #04AA6D;
color: white;
}

.round {
border-radius: 50%;
}
</style>
</head>
<body>

<h2>Previous and Next Buttons</h2>

<a href="#" class="previous">&laquo; Previous</a>


<a href="#" class="next">Next &raquo;</a>

<a href="#" class="previous round">&#8249;</a>


<a href="#" class="next round">&#8250;</a>

</body>
</html>

You might also like