Skycons, cant display the same icon twice?

css, javascript

Solution

You should use the version that works with element references instead of `id`

(And change the html to use classes instead of ids)

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

and change your html to

   <li class="col-md-3 col-sm-3 col-xs-3"><strong>Saturday</strong>
         <canvas class="snow" width="50" height="50"></canvas>
         <span>19&deg;</span>
   </li>
   <li class="col-md-3 col-sm-3 col-xs-3"><strong>Sunday</strong>
         <canvas class="rain" width="50" height="50"></canvas>
         <span>19&deg;</span>
   </li>
   <li class="col-md-3 col-sm-3 col-xs-3"><strong>Monday</strong>
         <canvas class="sleet" width="50" height="50"></canvas>
         <span>19&deg;</span>
   </li>
   <li class="col-md-3 col-sm-3 col-xs-3"><strong>Wednesday</strong>
         <canvas class="snow" width="50" height="50"></canvas>
         <span>19&deg;</span>
   </li>

If you need to support IE8 and older you need to use this polyfill for the `getElementsByClassName` function: Polyfill for getElementsByClassName for particular uses

Problem

I've hooked up the JavaScript plugin "Skycons" to Yahoo weather RSS feed. The problem I am having is that multiple days may have the same weather forecast and because the plugin pulls the icons from ID instead of class I am unable to pull the same icon a second time. For example, all icons below will show apart from the last li instance - because I have repeated the id snow: ``` <ul class="days"> <li class="col-md-3 col-sm-3 col-xs-3"><strong>Saturday</strong> <canvas id="snow" width="50" height="50"></canvas> <span>19&deg;</span> </li> <li class="col-md-3 col-sm-3 col-xs-3"><strong>Sunday</strong> <canvas id="rain" width="50" height="50"></canvas> <span>19&deg;</span> </li> <li class="col-md-3 col-sm-3 col-xs-3"><strong>Monday</strong> <canvas id="sleet" width="50" height="50"></canvas> <span>19&deg;</span> </li> <li class="col-md-3 col-sm-3 col-xs-3"><strong>Wednesday</strong> <canvas id="snow" width="50" height="50"></canvas> <span>19&deg;</span> </li> </ul> ``` Here is my init JS: ``` <!--SkyCons--> <script type="text/javascript" src="js/vendors/skycons/skycons.js"></script> <script> var icons = new Skycons({"color": "#fff"}), list = [ "clear-day", "clear-night", "partly-cloudy-day", "partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind", "fog" ], i; for(i = list.length; i--; ) icons.set(list[i], list[i]); icons.play(); </script> ``` and here is a link to the referenced JS file: https://github.com/darkskyapp/skycons/blob/master/skycons.js

Original source

Related problems