CODEWITHSUNDEEP
jqueryhtmlcssanimation
user5006419
user5006419

Reputation: 35

Cycle through array with animation

So I want to cycle through a list of arrays when I click the button, I've found info but can't figure out how and where to put it into the code I have already, check the below to see what I have already;

My Current Code

[1]: http://codepen.io/anon/pen/PqKYwz

If anyone could help me out that'd be great! It'd be a bonus if someone could show me how to style the Launch link, for some reason its being annoying as hell?

Upvotes: 2

Views: 124

Answers (1)

Saumil
Saumil

Reputation: 2517

If by cycle you mean to display all the name of the games one by one before displaying the final name of the game here is what you can do,

Here is a demo

So I have altered the PickRandomWord() and tick() and created 2 global variables "i" and "s" as below,

var i = 0;
var s;

function PickRandomWord(frm) {
        s = setInterval(function() {
            tick(frm);
        }, 180);
    }
function tick(frm) {

    frm.WordBox.value = words[i+1];
    i++;
    if (i > 27) {
        clearInterval(s);
        var rnd = Math.ceil(Math.random() * NumberOfWords);

        var index = words[rnd].indexOf("/");

        frm.WordBox.value = words[rnd].substring(0, index);
        var link = document.getElementById("gameLink");
        var str = words[rnd].substring(index + 1, words[rnd].length);
        link.innerHTML = "<a class='launchLink' href ='steam://run/" + str + "'>Launch</a>";
        i = 0;
    }
}

As you requested I have created a class launchLink for your "Launch" button and have applied some simple styling. You can change the styling according to your preferences.

Upvotes: 1

Related Questions