Question

I’ve got a single page that I need a timer to show up again and again on as the user continues to read further down the page.

It’s the same timer, it just counts down for a set period of time.

I’ve got the timer working perfectly in the first content span only, however it won’t display in all the other elements I’ve specified.

Here’s what the code looks like from within the .js file:

 document.getElementById('minutes').innerHTML = padNums(minutes, 2);
 document.getElementById('seconds').innerHTML = padNums(seconds, 2);
 document.getElementById('milliseconds').innerHTML = padNums(milliseconds, 3);   

The script from within the HTML file:

 $('.counter').html('<span id="minutes">0</span>' + ':' + '<span id="seconds">0</span>' + ':' + '<span id="milliseconds">0</span>' );  

And the HTML:

  <div class="wrapper">
    <p> There is this much time left: <span class="counter"> </span> </p>
    <p> There is this much time left: <span class="counter"> </span> </p> 
    <p> There is this much time left: <span class="counter"> </span> </p> 
  </div>  

……….

I’ve tried changing the .js methods to getElementsByClass and changing the spans to classes instead of id’s. and that stopped even the first countdown from working.

What else can I try?

Thanks

---

Here’s another set of code I’ve tried as suggested from below:

Inside the html page:

 <div class="wrapper">
    <p> There is this much time left: <span class="counter"> </span> </p>
    <p> There is this much time left: <span class="counter"> </span> </p> 
    <p> There is this much time left: <span class="counter"> </span> </p> 
  </div>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
  <script type="text/javascript">

  $('.counter').html('<span class="minutes">0</span>' + ':' + '<span     
  class="seconds">0</span>' + ':' + '<span class="milliseconds">0</span>' );


  </script>    

And within the .js:

 $('.minutes').innerHTML = padNums(minutes, 2);
 $('.seconds').innerHTML = padNums(seconds, 2);
 $('.milliseconds').innerHTML = padNums(milliseconds, 3); 

Although… this doesn’t work either.

---

The easiest way for me to accomplish this would be to create more sets of unique ids for each timer but I want a more elegant way of doing this.

Answer 1

Try using classes for spans #minutes, #seconds and #milliseconds instead of IDs.

You will then have to replace the three

document.getElementById('minutes') ... 

with

$('.minutes') ...

---

Just saw your edit.

You will need to use

$('.minutes').html('...')

in the same way you did with

$('.counter').html('...')