I've created a .js file that contains code for a photo album application. The file includes functions for changing images when buttons are clicked. However, when I interact with the buttons, the images do not change as expected.
The code in the .js file looks like this:
var dp = document.createElement("img");
function changeImage()
{
var list = document.getElementById('optionlist');
dp.src = list.options[list.selectedIndex].value;
alert(dp.src);
}
function prevImage()
{
var list = document.getElementById('optionlist');
alert("Arrived at prev");
if(list.selectedIndex == 0)
{
list.selectedIndex = list.options.length - 1;
}
else
{
list.selectedIndex--;
}
changeImage();
}
// Other button functions...
// HTML structure and element creation...
function start() {
// Function to set up the image gallery and button functionalities
}
// End of code
The corresponding HTML code is shown below:
<html>
<head>
<title>Photo Album</title>
<style>
p, td {color:blue;font-family:verdana;font-size:8pt}
h1 {color:black;font-family:verdana;font-size:14pt}
</style>
<script type="text/javascript" src="PAScript.js" language="javascript"></script>
</head>
<body onLoad="start()" bgcolor="grey">
<!-- Body content here -->
</body>
</html>
If anyone could provide assistance on how to resolve the button behavior issue in my application, I would greatly appreciate it. Thank you.
Best regards.