Could you assist me in troubleshooting this basic JavaScript code?

Question

Could you assist me in troubleshooting this basic JavaScript code?

I'm having trouble with my pictures not loading even though they're in the same folder.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Animal</title>
<script type="text/javascript">
var i = 0;
var timeout;
function preLoadImages()
{
if(document.images)
{
animalArray = new Array();
animalArray[0] = new Image();
anmialArray[0] = "bear.jpg";
animalArray[1] = new Image();
anmialArray[1] = "duck.jpg";
animalArray[2] = new Image();
anmialArray[2] = "elephant.jpg";
animalArray[3] = new Image();
anmialArray[3] = "lion.jpg";
animalArray[4] = new Image();
animalArray[4] = "cat.jpg";
}
else
alert("There are no images to load");
}
function startSlideShow()
{
if(i < animalArray.length)
{
document.images["animal_pic"].src = animalArray[i];
i++;
}
else
{
i =0;
document.images["animal_pic"].src = animalArray[i];
}
timeout = setTimeout('startSlideSHow()', 3000);
}
function stopSlideShow()
{
clearTimeout(timeout);
}
</script>
</head>
<body bgcolor="#FFFF00" onLoad = "preLoadImages()">
<img name="animal_pic" height="300" width="300"/>
<form>
<br/><br/>
<input type=button value="Start Show" onClick="return startSlideShow();"/>
<input type=button value="Stop Show" onClick="return stopSlideShow();"/></form>      
</body>
</html>

javascript arrays

Answer 1

Answer №1

The animal array has been created, but the value is incorrectly stored in anmial. Additionally, the src property must be set...

Incorrect:

animal[0] = new Image();
anmial[0] = "bear.jpg";

Corrected version:

animal[0] = new Image();
animal[0].src = "bear.jpg";

Answer 2

The animal array has been created, but the value is incorrectly stored in anmial. Additionally, the src property must be set...

Incorrect:

animal[0] = new Image();
anmial[0] = "bear.jpg";

Corrected version:

animal[0] = new Image();
animal[0].src = "bear.jpg";

Answer 3

Answer №2

Upon a quick glance, it appears that you are missing a closing bracket here :

animal[3] = "lion.jpg";
animal[4] = new Image();
animal[4] = "cat.jpg";
} else {

I also noticed some spelling errors in the name of your array :

anmial[3] = ...
animal[4] = ...

Make sure to tidy up your code before proceeding with testing...

Answer 4

Upon a quick glance, it appears that you are missing a closing bracket here :

animal[3] = "lion.jpg";
animal[4] = new Image();
animal[4] = "cat.jpg";
} else {

I also noticed some spelling errors in the name of your array :

anmial[3] = ...
animal[4] = ...

Make sure to tidy up your code before proceeding with testing...

Answer 5

Answer №3

Below is some code I have developed that should be effective:

(function() {

    'use strict';

    var currentImage = 0,
        imageElement,
        timer,
        images = [
            'bear.jpg',
            'duck.jpg',
            'elephant.jpg',
            'lion.jpg',
            'cat.jpg'
        ];

    var startSlideShow = function() {

        timer = window.setInterval(nextImage, 3000);
    };

    var stopSlideShow = function() {

        window.clearInterval(timer);
    };

    var nextImage = function() {

        currentImage++;

        if( currentImage == images.length ) {
            currentImage = 0;
        }

        imageElement.src = images[currentImage];
    };

    window.addEventListener('DOMContentLoaded', function() {

        imageElement = document.querySelector('img[name="animal_pic"]');
        imageElement.src = images[0];

        startSlideShow();
    });

})();

You may want to consider reviewing some fundamental JavaScript tutorials as there are several errors in your code. Here are a few suggestions for improvement.

// Make sure to properly indent your code.
var i = 0;
var timeout;

function preLoadImages() { // This function does not actually preload any images.
    if(document.images) { // Whether or not there are images in the document has no bearing on manually loading them.
        animal = ['bear.jpg', 'duck.jpg', 'elephant.jpg', 'lion.jpg', 'cat.jpg']; // Use array literal notation and declare variables with 'var'.
    } else { 
        alert("There are no images to load"); 
    }
}

function startSlideShow() {
    if(i < animal.length) {
        document.images["animal_pic"].src = animal[i];
        i++;
    } else {
        i = 0;
        document.images["animal_pic"].src = animal[i];
    }
    timeout = setTimeout(startSlideShow, 3000); // Pass the function name directly, and correct the function name typo.
}

function stopSlideShow() {
    clearTimeout(timeout);
}

Answer 6

Below is some code I have developed that should be effective:

(function() {

    'use strict';

    var currentImage = 0,
        imageElement,
        timer,
        images = [
            'bear.jpg',
            'duck.jpg',
            'elephant.jpg',
            'lion.jpg',
            'cat.jpg'
        ];

    var startSlideShow = function() {

        timer = window.setInterval(nextImage, 3000);
    };

    var stopSlideShow = function() {

        window.clearInterval(timer);
    };

    var nextImage = function() {

        currentImage++;

        if( currentImage == images.length ) {
            currentImage = 0;
        }

        imageElement.src = images[currentImage];
    };

    window.addEventListener('DOMContentLoaded', function() {

        imageElement = document.querySelector('img[name="animal_pic"]');
        imageElement.src = images[0];

        startSlideShow();
    });

})();

You may want to consider reviewing some fundamental JavaScript tutorials as there are several errors in your code. Here are a few suggestions for improvement.

// Make sure to properly indent your code.
var i = 0;
var timeout;

function preLoadImages() { // This function does not actually preload any images.
    if(document.images) { // Whether or not there are images in the document has no bearing on manually loading them.
        animal = ['bear.jpg', 'duck.jpg', 'elephant.jpg', 'lion.jpg', 'cat.jpg']; // Use array literal notation and declare variables with 'var'.
    } else { 
        alert("There are no images to load"); 
    }
}

function startSlideShow() {
    if(i < animal.length) {
        document.images["animal_pic"].src = animal[i];
        i++;
    } else {
        i = 0;
        document.images["animal_pic"].src = animal[i];
    }
    timeout = setTimeout(startSlideShow, 3000); // Pass the function name directly, and correct the function name typo.
}

function stopSlideShow() {
    clearTimeout(timeout);
}

Answer 7

Answer №4

animal[4] = "cat.jpg";
    }
    else
    alert("There are no images to load");
    }
    function startSlideShow()

It appears that there are two closing curly braces but none to open the else alert( statement. Consider adding an opening curly brace before it:

else
alert("There are no images to load");

You could add an opening curly brace or remove the unnecessary statement altogether.

Answer 8

animal[4] = "cat.jpg";
    }
    else
    alert("There are no images to load");
    }
    function startSlideShow()

It appears that there are two closing curly braces but none to open the else alert( statement. Consider adding an opening curly brace before it:

else
alert("There are no images to load");

You could add an opening curly brace or remove the unnecessary statement altogether.

Could you assist me in troubleshooting this basic JavaScript code?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Discover how to utilize a jQuery array using the assistance of a variable

In what way does an ArrayList exhibit heterogeneity while utilizing an internal Object[] Array?

Challenges with Nginx URL redirection

Modifying a blank array of integers within a ui:repeat loop

Angular Form Group without a name

Navigating Date Conversion within Component in Angular 2 Application

How can I turn off the animation for a q-select (quasar select input)?

Adding JSON data to an HTML document

What is the best way to send a string parameter from an Angular UI to a Node.js backend?

Utilize graphics in three.js for texture recycling

Click on the links to view various captions for a single image, one at a time

What's preventing me from using the left click function on my published blog post?

Can you show me a way to display a dynamically created array component on an Angular2 template html?

tips for asynchronously loading cloud endpoints APIs

What is the best way to convert an HTML table into an array of objects?

Verify WTForm after dynamic updates to select field options with Jquery

Update an existing item or add a new one if it is not already present

What is the best way to prevent elements in the split function from being stored in an array?

An error was encountered when attempting to use the 'await' syntax in a useEffect() function that called axios.get()

Using Jquery to create interactive and dynamic webpage elements