Add a css class or span to a .js variable

Question

I have a working countdown timer "days, hours, minutes, seconds" and I need to change the color of the seconds "var" from white to yellow while the other var's will keep the white color.

The problem is that the whole countdown date is being placed on a single div and I cannot add a specific class or a span to the "seconds" variable.

I tried many different solutions but none seems to work in this case so I decided to ask for help and make a Question.

The HTML.

<div class="container">
  <div id="countdown" align="center"> <!-- The countdown is being displayed here -->

  </div>
</div>

The JS.

CountDownTimer('06/01/2016 06:00 AM', 'countdown');

    function CountDownTimer(dt, id)
    {
        var end = new Date(dt);

        var _second = 1000;
        var _minute = + _second * 60;
        var _hour = _minute * 60;
        var _day = _hour * 24;
        var timer;




        function showRemaining() {
            var now = new Date();
            var distance = end - now;
            if (distance < 0) {

                clearInterval(timer);
                document.getElementById(id).innerHTML = 'end';

                return;
            }
            var days = Math.floor(distance / _day);
            var hours = Math.floor((distance % _day) / _hour);
            var minutes = Math.floor((distance % _hour) / _minute);
            var seconds = Math.floor((distance % _minute) / _second);   




            document.getElementById('countdown').innerHTML = days + ' ';
            document.getElementById('countdown').innerHTML += hours + ' ';
            document.getElementById('countdown').innerHTML += minutes + ' ';
            document.getElementById('countdown').innerHTML += seconds + ' ';


        }

        timer = setInterval(showRemaining, 1000);
    }

Working JS FIDDLE here where you can see for yourself:

https://jsfiddle.net/baqc6nx2/1/

And here is the image explaining how the seconds var should be colored yellow and the others white.

Sorry for my bad English, and thank you for your time.

EDIT:---------------------------------------------------------------

This is not a duplicate, I know the last child selectors, but in this case it wont work, I tried.

Edit-----------------------------------------------------------------

TGO Helped me and now it is working, please reopen the question so I can complete it.

"and I cannot add a specific class or a span to the "seconds" variable." why is that? — BitParser, May 17 '16 at 11:49
It is giving me error, something is not compatible when I try it, I probably am doing it wrong, it can be. — sharben, May 17 '16 at 11:54
Yeah, well question needs to be reopened because of a misunderstanding; thus it's not a duplicate. Only then can I post my answer. — BitParser, May 17 '16 at 11:58
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/112163/discussion-between-nosferatu-and-tgo). — sharben, May 17 '16 at 12:01
You cannot style a text node with different styles. You have to add a wrapper node around each element that you want styled specifically. — Ruan Mendes, May 17 '16 at 12:18

score 2 · Accepted Answer · answered May 17 '16 at 12:18

Here is an updated fiddle which solves your problem. http://jsfiddle.net/baqc6nx2/2

For convenience, this is the changed line of code:

document.getElementById('countdown').innerHTML += '<span style="color:yellow;">' + seconds + '</span> ';

Here I create a span tag, give it the proper CSS style to turn the color yellow, and the seconds value is put inside the span element.

Add a css class or span to a .js variable

1 Answers1