How to add different data attribute to random elements in an array in Javascript?

Question

I'm working with Animate on Scroll and want to assign a different animation delay to random elements in an array (or even vs. odd), which are displayed as list items. Since you have to add/change the data attribute (e.g. data-aos-delay="50"), I'm not sure how best to do this so that half the list items have a different delay time. Thanks so much!

AOS on GitHub

var words = ["Superheroes", "supervillains", "aliens", "monsters", "wizards", "warriors", "witches", "barbarians", "creatures", "robots", "cyborgs", "droids", "time travelers", "spaceships", "star fighters "]

function wordsLoad() {
// Shuffle function from http://stackoverflow.com/a/2450976
function shuffle(array) {
    var currentIndex = array.length, temporaryValue, randomIndex;

    while (currentIndex !== 0) {
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex -= 1;
        temporaryValue = array[currentIndex];
        array[currentIndex] = array[randomIndex];
        array[randomIndex] = temporaryValue;
    }
    return array;
}
words = shuffle(words);

//create HTML for each word
function createWord(word) {
    return '<li class="text-uppercase" data-aos="slide-up">' + word + '</li>';
}
//add words HTML to page
function generateWords() {
    const group = document.querySelector('.products');//.products of class of <ul>
    const wordHTML = words.map(function(word) {
        return createWord(word);
    });
    group.innerHTML = wordHTML.join('');
}
generateWords();
}
$(document).ready(function() {
wordsLoad();
});

Not sure I understand your question...are you saying that in <li class="text-uppercase" data-aos="slide-up"> you want to add an attribute data-aos-delay with a random number? — Bruno Monteiro
– Bruno Monteiro, Commented Sep 23, 2019 at 1:42
I want to add data-aos-delay to all elements, but every other with a different number such as <li class="text-uppercase" data-aos="slide-up" data-aos-delay="50">star fighters </li> <li class="text-uppercase" data-aos="slide-up" data-aos-delay="100">aliens</li> <li class="text-uppercase" data-aos="slide-up" data-aos-delay="50">warriors</li> ... — cmbaginski
– cmbaginski, Commented Sep 23, 2019 at 22:48

Ethan Kelley · Accepted Answer · 2019-09-23 04:54:30Z

1

If you're asking about adding data dynamically to the html strings you are generating, template literals can help. Assuming you just want to alternate between two different delay values, you could try this:

function createWord(word, delay) {
    // using a template literal will enable string interpolation.
    // note the use of backticks (instead of single quotes):
    return `<li class="text-uppercase" data-aos-delay="${delay}" data-aos="slide-up">${word}</li>`;
}

function generateWords() {
    const group = document.querySelector('.products');

    const delayValues = [50, 100];
    const wordHTML = words.map(function(word, idx) {
        const delay = delayValues[idx % 2]; // alternate delay values for even vs odd words
        return createWord(word, delay);
    });
    group.innerHTML = wordHTML.join('');
}

answered Sep 23, 2019 at 4:54

Ethan Kelley

1131 silver badge8 bronze badges

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

2 Comments

cmbaginski Over a year ago

I got this to work. Thanks! I've only been learning JS for about 9 months now so really appreciate the extra help.

Ethan Kelley Over a year ago

Sure thing! Wanna accept this as the answer if it worked? :)

Collectives™ on Stack Overflow

How to add different data attribute to random elements in an array in Javascript?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related