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
– BitParser, Commented May 17, 2016 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
– sharben, Commented May 17, 2016 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
– BitParser, Commented May 17, 2016 at 11:58

BitParser · Accepted Answer · 2016-05-17 12:18:16Z

2

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.

answered May 17, 2016 at 12:18

BitParser

3,98829 silver badges43 bronze badges

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

Collectives™ on Stack Overflow

Add a css class or span to a .js variable

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related