CODEWITHSUNDEEP
javascripthtml
Roberts Šensters
Roberts Šensters

Reputation: 605

Only one timer working at the time (html+js)

I have one timer and i want it in two different places in my website. But only one is working at the time.

Here is Script + first timer below it.

 <script>
    var interval;
    var minutes = 8;
    var seconds = 41;
    window.onload = function() {
        countdown('countdown');
        myFunction();
        myFunctiontoo();

    }

    function countdown(element) {
        interval = setInterval(function() {
            var el = document.getElementById("timerx");
            if(seconds == 0) {
                if(minutes == 0) {
                    el.innerHTML = "Free trial bonus has expired!";                    
                    clearInterval(interval);
                    return;
                } else {
                    minutes--;
                    seconds = 60;
                }
            }
            if(minutes > 0) {
                var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute');
            } else {
                var minute_text = '';
            }
            var second_text = seconds > 1 ? 'seconds' : 'second';
            el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + '';
            seconds--;
        }, 1000);
    }
    </script>

    <div class="countdown"><span style="color:#EA0423;">Free Trial bonus ends in </span><span id="timerx" style="font-weight:bold;">8 minutes and 42 seconds</span>.
  </div>

A bit lower in my HTML code i have another timer.

<span style="color:#FFF1D6;">Free Trial bonus ends in </span><span id="timerx" style="font-weight:bold;">8 minutes and 42 seconds</span>.

The second timer unfortunately is not working.

Upvotes: 0

Views: 103

Answers (2)

Przemek
Przemek

Reputation: 803

Method getElementById other than getElementsByClassName return only one DOM element.

Method getElementsByClassName returns an array of elements so you can get them using an index

Here is working example: PLUNKER

You can us getElementsByClassName and your code would look like this: 

    function countdown(element) {
    var start_value = "Free trial bonus has expired!"
    interval = setInterval(function() {
        var el1 = document.getElementsByClassName("timerx")[0];
        var el2 = document.getElementsByClassName("timerx")[1];
        if(seconds == 0) {
            if(minutes == 0) {
                el1.innerHTML = start_value;                    
                el2.innerHTML = start_value;                    
                clearInterval(interval);
                return;
            } else {
                minutes--;
                seconds = 60;
            }
        }
        if(minutes > 0) {
            var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute');
        } else {
            var minute_text = '';
        }
        var second_text = seconds > 1 ? 'seconds' : 'second';
        el1.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + '';
        el2.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + '';
        seconds--;
    }, 1000);
}

Upvotes: 1

Ajay
Ajay

Reputation: 459

If you are calling the timer twice in the same page you need to have two IDs. The id="timerx"

<span id="timerx_"<?php echo 'DYNAMIC VARIBALE'; ?>>timer</span>

And use this new ID

Upvotes: 0

Related Questions