Function Giving Undefined Error In Jquery

I am trying to integrate a slider into my application. I am referring this w3schools sample. But for some reason whenever the page loads the images comes for a second then disappea

Solution 1:

You're trying to call functions globally from your HTML document:

onclick="plusSlides(-1)"

But those functions are defined in a closed scope inside another function:

$(document).ready(function() {

    //...functionplusSlides(n) {
        showSlides(slideIndex += n);
    }

    //...

});

Nothing defined inside that anonymous function() {} passed to the document.ready handler will be visible outside that function.

You can assign the functions to the window object instead:

$(document).ready(function() {

    //...window.plusSlides = function (n) {
        showSlides(slideIndex += n);
    };

    //...

});

Or define the functions outside of that scope:

$(document).ready(function() {

    //...

});

functionplusSlides(n) {
    showSlides(slideIndex += n);
}

//...

Your other functions, references to those functions, etc. may also need to be adjusted for the same reasons. Things outside a function can be accessed from inside of it, but not the other way around.

Solution 2:

This is a classic scoping issue.

plusSlides is defined inside the $.ready(function) which has it's own scope and is not accessible at window level. Easy fix for you is to rewrite it like so:

window.plusSlides = function(n) {
   showSlides(slideIndex += n)
}

So plusSlides is now a function accessible at window scope, however, the content of the function also is a closure with access to the scope from the $.ready(function).