Append css to a javascript variable

Question

I have a basic time-clock script. I would like to have control over each digit. How would I add css to these variables? This is what I've tried.

window.onload = function startTime() {

          var today=new Date();
          var h=today.getHours();
              h="<span id='hours'>"+h+"</span>";
          var m=today.getMinutes();
          var s=today.getSeconds();
          // add a zero in front of numbers<10
          m=checkTime(m);
              m="<span id='minutes'>"+m+"</span>";
          s=checkTime(s);
              s="<span id='seconds'>"+s+"</span>";
          document.getElementById("txt").innerHTML=h+"<span class='time-colon'>:"+"</span>"+m+"<span class='time-colon'>:"+"</span>"+s;
          t=setTimeout(function(){startTime()},500);
          }

          function checkTime(i)
          {
          if (i<10)
            {
            i="0" + i;
            }
          return i;

         }

Flight Odyssey · Accepted Answer · 2013-11-27 01:23:05Z

1

Use a span for each digit. h is a String, it is not an HTML element yet.

h="<span style='color:black;'>"+h+"</span>";

Note that CSS classes (in external stylesheets) are preferred to inline styles.

edited Nov 27, 2013 at 1:23

answered Nov 27, 2013 at 0:57

Flight Odyssey

2,28620 silver badges26 bronze badges

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

1 Comment

Paul Yorde Over a year ago

I see. I was looking at it like h was an object. However, h is the result(string) of getHours, which then gets set into the html.

Collectives™ on Stack Overflow

Append css to a javascript variable

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related