Change html to next item in array - jquery

Question

My first array, what I thought would be pretty simple just isn't (although my knowledge of js is pretty minimal).

I'm trying to iterate through the array (in order) on a click event. So, on the front-end, you'll be presented with a fact and you'll click a button to view the next fact... simple idea.

Q: When it's all working, at the end of the array, what will happen when the user clicks to see the next one? How would I go about handling that?

JS

$(document).ready( function() {
    function factsInit() {
        // Define all facts
        var factText = [
                "Oxford won the first Boat Race, which took place on 10th June 1829 at Henley-on-Thames.",
                "In 2003, Oxford won the closest ever Boat Race by just one foot.",
                "Oxford coxswain Sue Brown became the first woman to participate in The Boat Race in 1981.",
                "Oxford's victorious 2009 Blue Boat was the heaviest in the history of the race at an average of 15st 9lb 13oz (99.7kg) per rower.",
                "In 2012, Oxford's reserve crew, Isis, beat Goldie by 5 lengths to set the course record for the reserve race at 16:41."
            ],
            factImage = [
                "/clients/oubc/assets/img/factimage_firstrace.jpg",
                "/clients/oubc/assets/img/factimage_oubc2003.jpg",
                "/clients/oubc/assets/img/factimage_oubcsuebrown.jpg",
                "/clients/oubc/assets/img/factimage_oubc2009heaviestever.jpg",
                "/clients/oubc/assets/img/factimage_isis2012.jpg"
            ];

        // Apply these facts
        $('#widget_facts .fact_text').html(factText[0]);
        $('#widget_facts .fact_image > *').attr('src', factImage[0]);

        // Go to next fact on click
        $('#widget_facts .link > a').click( function() {
            $('#widget_facts .fact_text').html(factText++);
            $('#widget_facts .fact_image > *').attr('src', factImage++);
        });
    }
    // Run the first fact
    factsInit();
});

@BharathRallapalli $('#widget_facts .fact_text').html(factText++); — rorypicko
– rorypicko, Commented Oct 24, 2013 at 16:12
@M_Willett FYI, NaN (Not a Number) factText is an array, when you use the ++ operator it expects and number, which is why you get NaN... — rorypicko
– rorypicko, Commented Oct 24, 2013 at 16:25

Jasper · Accepted Answer · 2013-10-24 16:11:47Z

2

Basically you want to increment a counter variable, and use it to access an index of the array you've got.

//declare the counter var
var factCounter = 0;

//setup event handler for click event
$('#widget_facts .link > a').click( function() {

    //change the text based on the current counter value
    $('#widget_facts .fact_text').html(factText[factCounter]);

    //change the image based on the current counter value
    $('#widget_facts .fact_image > *').attr('src', factImage[factCounter]);

    //increment the counter var for next time
    factCounter++;

    //if the counter var is too large for the number of indexes we've got to work with
    if (factCounter >= factText.length) {

        //start over at zero
        factCounter = 0;
    }
});

You can also put the factCounter increment code before updating the values if you start with the first one showing and want to show the second index on the first click.

Since arrays are zero-indexed, checking to see if your counter is greater or equal to the number of indexes is basically checking if the index exists. If the current counter value is equal to the number of indexes, no index at the counter value exists (due to starting at zero rather than one).

answered Oct 24, 2013 at 16:11

Jasper

76.1k14 gold badges153 silver badges148 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Matt W Over a year ago

Ahhhh I see, so with factText++ I was incrementing a string with an integer? Makes sense, and works like a dream. thanks

Jasper Over a year ago

@M_Willett factText++ doesn't really make sense. You can't increment an array and doing this does not increment some internal pointer of the array. ++ is to increment integers.

Jasper Over a year ago

@M_Willett Here is some great documentation on JS arrays. It'll show you about objects versus arrays and a ton of good information: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Matt W Over a year ago

Thanks!! I was actually looking at that before posting the Q. MDN is great

Collectives™ on Stack Overflow

Change html to next item in array - jquery

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related