Write on html on load

Question

I have created a function who tracks on which slide I am currently on and display the result eg If I am on slide 2 of 3 it will display 2/3

my problem is that right now it is set to do that every time I click the forward arrow but it displays nothing on page load.

$('.forward').click(function() {
var current = $('#slider').data('AnythingSlider').currentPage; // returns page #
var count = $("#slider").children().length - 2;
$("#bottom-image").html(current + "/" + count) ;
});

I am trying to find out how to execute this function on page load and where to put it in my code. I am currently learning Javascript through Codecadamedy so I have a basic knowledge of Javascript but I am not enough fluent right now to figure this one out.

Here is a link to the current non working code : http://www.soleilcom.com/metacor_dev/our-plants.php

Answer 1

It looks like you are using jQuery. To execute a function on DOM load in query, do this:

$(document).ready(function() {
    /* your code */
});

In your case, that would be:

$(document).ready(function() {
    $('.forward').click(function() {
        var current = $('#slider').data('AnythingSlider').currentPage; // returns page #
        var count = $("#slider").children().length - 2;
        $("#bottom-image").html(current + "/" + count) ;
    });
});

For things like most event handlers, and most other things, initializing at DOM load is good enough. If your code needs to take account for rendered elements or rendered heights, use $(window).load() instead. (In your case DOM load is fine).

Note that this will just establish the click handler at load time. To also run it once, you can do it automatically by either calling the function yourself or triggering a click. To call it yourself, first define another function. The use the function in both the click handler and in one immediate call:

$(document).ready(function() {
    var forward = function() {
        var current = $('#slider').data('AnythingSlider').currentPage; // returns page #
        var count = $("#slider").children().length - 2;
        $("#bottom-image").html(current + "/" + count) ;
    }

    $('.forward').click(forward);
    forward();
});

Or to trigger it yourself, just define the click handler and trigger a click programatically:

$(document).ready(function() {
    $('.forward').click(function() {
        var current = $('#slider').data('AnythingSlider').currentPage; // returns page #
        var count = $("#slider").children().length - 2;
        $("#bottom-image").html(current + "/" + count) ;
    }).click();
});

Answer 2

It looks like you are using jQuery, so you would use this:

$(document).ready(function(){
    // Code here
});

Or, you can use the shortcut:

$(function(){
    // Code here
});

Read more about this on the jQuery website

Answer 3

If you give the function a name, then you can use it multiple times:

$(document).ready(function() {
    // Bind to click event
    $('.forward').click(forwardSlide)

    // Execute function on page load
    forwardSlide();
});

function forwardSlide() {
    var current = $('#slider').data('AnythingSlider').currentPage; // returns page #
    var count = $("#slider").children().length - 2;
};

Is this what you're looking for?