How to add marquee element with text to a div in javascript

Question

I have an array of line_items which contain some text, i have 9 div with id like <div id="scroller-1"></div> and scroller-2 and so on...

what i want to do is i am iterating through array and getting text, but i want to add first element to div with scroller-1 id, second element to scroller-2 and so on like for all 9 divs. how can i do that

var trending_cat = [
        ["Lotto Rapid Running Shoes"],
        ["Paradise (English) (Paperback)"],
        ["Canon EOS 700D (Body with 18-135 mm Lens) DSLR Camera"],
        ["Huetrap Graphic Print Men's Round Neck T-Shirt"],
        ["Vincent chase vc 5158 silver silver reflector mirror ao12jo aviator sunglasses"],
        ["Orka XL Bean Bag With Bean Filling"],
        ['HP Compaq 15-s103TX Notebook (4th Gen Ci3 4GB 1TB Free DOS 2GB Graph) (K8T82PA)'],
        ['Moto G (2nd Generation) White, 16 GB'],
        ['Fastrack 9827PP01 Hip Hop Analog Watch - For Women'],
];

javascript:

for (var i = 0; i < trending_cat.length; i++) {
    var cato = trending_cat[i][0];
  }

i want to append the value like this

<marquee scrollamount="38"><strong><h1>[i][0]</h1></strong></marquee>

This post could be helpful: http://stackoverflow.com/questions/337330/javascript-marquee-to-replace-marquee-tags — SpaceCowboy, Jun 26 '15 at 14:50
@T.J.Crowder the array contains 1 element per line item. i want to iterate through array and 1st line item i want to append to div scroller-1.. and like that i have 9 divs in which 9 items each one will be appended to that div. — CJAY, Jun 26 '15 at 14:50
I thought `` didn't move anymore in recent browsers >:D (those were the days). — Joseph, Jun 26 '15 at 14:51
I remember that time when I've used ``. It was in 2004. Anyway: http://stackoverflow.com/questions/11520840/marquee-tag-still-works-is-it-okay-to-use-it — briosheje, Jun 26 '15 at 15:08

score 1 · Accepted Answer · answered Jun 26 '15 at 14:51

There are a couple of ways. If there's a CSS selector that matches the elements in the order you want to apply them, it's really easy:

var list = document.querySelectorAll("the-css-selector");
for (var i = 0; i < trending_cat.length; i++) {
    list[i].innerHTML = trending_cat[i][0];
}

If you need to work with id values in the form scroller-1 through scroller-9, it's also really straightforward:

for (var i = 0; i < trending_cat.length; i++) {
    document.getElementById("scroller-" + (i + 1)).innerHTML = trending_cat[i][0];
}

Both of those assume you want to interpret the strings as HTML. If you want them interpreted as pure text, cross-browser issues make it a bit more complicated (but not much).

var list = document.querySelectorAll("the-css-selector");
for (var i = 0; i < trending_cat.length; i++) {
    list[i].innerHTML = "";
    list[i].appendChild(document.createTextNode(trending_cat[i][0]));
}

Or with the ids:

var element;
for (var i = 0; i < trending_cat.length; i++) {
    element = document.getElementById("scroller-" + (i + 1));
    element.innerHTML = "";
    element.appendChild(document.createTextNode(trending_cat[i][0]));
}

In both cases, we can be more succinct using Array#forEach:

var list = document.querySelectorAll("the-css-selector");
trending_cat.forEach(function(cato) {
    list[i].innerHTML = "";
    list[i].appendChild(document.createTextNode(cato));
});

(And similarly for the ids version.)

score 0 · Answer 2 · answered Jun 26 '15 at 14:58

If you rearrange the html tag so that the marquee is in the center, you can insert the text without worrying about overwriting the h1 and strong tags. E.g.,

<strong><h1><marquee id="scroller-0" scrollamount="38"></marquee></h1></strong>

Also, your strings inside trending_cat do not have to be in separate arrays. This is fine:

var trending_cat = [
    "Lotto Rapid Running Shoes",
    // etc
];

You can use a for-loop to set the values:

for (var i=0; i<8; i++) {
    document.getElementById("scroller-"+i).innerText = trending_cat[i];
}

Here is a running example: https://jsfiddle.net/dxv1x419/2/

How to add marquee element with text to a div in javascript

2 Answers2