How to use id twice in javascript with Skycons

Question

I am using Skycons and it is working absolutly fine. But when I have 2 canvas id's it would render the first one but the other one will be blank.

In JS i have:

var icons = new Skycons({
            "color": "#73879C"
        }),
                list = [
                    "clear-day", "clear-night", "partly-cloudy-day",
                    "partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind",
                    "fog"
                ],
                i;

        for (i = list.length; i--; )
            icons.add(list[i], list[i]);

        icons.play();

So when i need 3 icons

<canvas id="rain" width="128" height="128"></canvas>
<canvas id="partly-cloudy-day" width="128" height="128"></canvas>
<canvas id="partly-cloudy-day" width="128" height="128"></canvas>

The first two will render but the third won't because it has been used twice(the id). I need all the same id's to be rendered because I do not know how many times I will use partly-cloudy-day. I hope that make sence but feel free to ask any questions that's needed.

Thanks for your help

This seems like a clear case for using classes instead of `id`s. Ids should not be duplicated. — IrkenInvader, Jul 27 '16 at 14:26
More than "should not," IDs *must* not be duplicated. HTML explicitly forbids that and any script using the ID will only ever see the first element. — ssube, Jul 27 '16 at 14:29

score 4 · Accepted Answer · edited May 23 '17 at 12:18

Found this: Skycons, cant display the same icon twice?

By using classes instead of IDs, and tweaking your function like the answer I linked:

var icons = new Skycons({
        "color": "#73879C"
    }),
    list = [
        "clear-day", "clear-night", "partly-cloudy-day",
        "partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind",
        "fog"
    ],
    i;

for (i = list.length; i--;) {
    var weatherType = list[i],
        elements = document.getElementsByClassName(weatherType);
    for (e = elements.length; e--;) {
        icons.set(elements[e], weatherType);
    }
}

icons.play();

JSFiddle: https://jsfiddle.net/yuriy636/egg7p7hr/

score 2 · Answer 2 · answered Jul 27 '16 at 14:39

The whole point of id's is that two objects must not have identical ids. It's like two passports having the same number - imagine all the confusion at the border control. HTML will always ignore all but first element with a given id.

Use classes instead. That's what they are for. Then when you search for elements by $('.class-name') or document.getElementByClassName('class-name'), you get the desired result.

How to use id twice in javascript with Skycons

2 Answers2