Multiple clocks on a web application using HTML, CSS, Javascript

Question

I'm currently playing around with a clock I found on codepen Here.

It works perfectly but I'm having a little trouble displaying more than one. I have duplicated the code just to try and get it working but I must have missed something. I have the following javascript firing on page load:

 setInterval(function() {
  function r(el, deg) {
    el.setAttribute('transform', 'rotate('+ deg +' 50 50)')
  }
  var d = new Date()
  r(sec, 6*d.getSeconds())  
  r(min, 6*d.getMinutes())
  r(hour, 30*(d.getHours()%12) + d.getMinutes()/2)
}, 1000);

setInterval2(function() {
  function r2(el2, deg2) {
    el2.setAttribute('transform', 'rotate('+ deg2 +' 50 50)')
  }
  var d2 = new Date()
  r2(sec2, 6*d2.getSeconds())  
  r2(min2, 6*d2.getMinutes())
  r2(hour2, 30*(d2.getHours()%12) + d2.getMinutes()/2)
}, 1000);

And the following duplicated CSS:

body {
  margin: 0;
  //background: midnightblue;
}
#clock-container { 
  display: inline-block;
  position: relative;
  width: 4%;
  //padding-bottom: 100%;
  vertical-align: middle;
  overflow: hidden;
  //background: midnightblue;
} 
#face { stroke-width: 2px; stroke: #fff; fill: #fff; }
#hour, #min, #sec { 
  stroke-width: 1px;
  fill: #333;
  stroke: #555;
}
#sec { stroke: #f55; }

body {
  margin: 0;
  //background: midnightblue;
}
#clock-container2 { 
  display: inline-block;
  position: relative;
  width: 4%;
  //padding-bottom: 100%;
  vertical-align: middle;
  overflow: hidden;
  //background: midnightblue;
} 
#face2 { stroke-width: 2px; stroke: #fff; fill: #fff; }
#hour2, #min2, #sec2 { 
  stroke-width: 1px;
  fill: #333;
  stroke: #555;
}
#sec2 { stroke: #f55; }

And also the following two regions:

<div id="clock-container">
<svg id="clock" viewBox="0 0 100 100">
  <circle id="face" cx="50" cy="50" r="45"/>
  <g id="hands">
    <rect id="hour" x="47.5" y="12.5" width="5" height="40" rx="2.5" ry="2.55" />
    <rect id="min" x="48.5" y="12.5" width="3" height="40" rx="2" ry="2"/>
    <line id="sec" x1="50" y1="50" x2="50" y2="16" />
  </g>
</svg>
</div>


<div id="clock-container2">
<svg id="clock2" viewBox="0 0 100 100">
  <circle id="face2" cx="50" cy="50" r="45"/>
  <g id="hands2">
    <rect id="hour2" x="47.5" y="12.5" width="5" height="40" rx="2.5" ry="2.55" />
    <rect id="min2" x="48.5" y="12.5" width="3" height="40" rx="2" ry="2"/>
    <line id="sec2" x1="50" y1="50" x2="50" y2="16" />
  </g>
</svg>
</div>

The first region is working perfectly and the second one displays with the hands at 12:00 and not moving, so I assume the Javascript isn't firing. I have tried it with just the code from the second one and it doesn't work so again, silly error I presume!

Can anyone see what I've done wrong? I'm doing this in Oracle Apex but it just generates a web page so I don't suppose that matters too much. Thanks!

Answer 1

setInterval is a built-in Javascript function which causes something to happen at a regular interval (the function you pass as its argument).

setInterval2 is not a built-in Javascript function. You probably want to call setInterval again :)

Note that the other answers give you alternate (neater) ways to set up multiple clocks on one page. This answer is only answering the question about why your attempt fails, I'm not suggesting this is the best approach.

Answer 2

You need to duplicate the structure and amend the id's then duplicate the call to the r function with the new id's

E.g. Javascript:

setInterval(function() {
  function r(el, deg) {
    el.setAttribute('transform', 'rotate('+ deg +' 50 50)')
  }
  var d = new Date()
  r(sec, 6*d.getSeconds())  
  r(min, 6*d.getMinutes())
  r(hour, 30*(d.getHours()%12) + d.getMinutes()/2)
  r(sec2, 6*d.getSeconds())  
  r(min2, 6*d.getMinutes())
  r(hour2, 30*(d.getHours()%12) + d.getMinutes()/2)
}, 1000)

Then also make the same CSS apply to the new elements:

body {
  margin: 0;
  background: midnightblue;
}
#clock-container, #clock-container2 { 
  display: inline-block;
  position: relative;
  width: 20%;
  padding-bottom: 100%;
  vertical-align: middle;
  overflow: hidden;
  background: midnightblue;
} 
#face, #face2 { stroke-width: 2px; stroke: #fff; }
#hour, #min, #sec, #hour2, #min2, #sec2 { 
  stroke-width: 1px;
  fill: #333;
  stroke: #555;
}
#sec, #sec2 { stroke: #f55; }

Finally the additional HTML:

<div id="clock-container">
<svg id="clock" viewBox="0 0 100 100">
  <circle id="face" cx="50" cy="50" r="45"/>
  <g id="hands">
    <rect id="hour" x="47.5" y="12.5" width="5" height="40" rx="2.5" ry="2.55" />
    <rect id="min" x="48.5" y="12.5" width="3" height="40" rx="2" ry="2"/>
    <line id="sec" x1="50" y1="50" x2="50" y2="16" />
  </g>
</svg>
</div>
<div id="clock-container2">
<svg id="clock2" viewBox="0 0 100 100">
  <circle id="face2" cx="50" cy="50" r="45"/>
  <g id="hands2">
    <rect id="hour2" x="47.5" y="12.5" width="5" height="40" rx="2.5" ry="2.55" />
    <rect id="min2" x="48.5" y="12.5" width="3" height="40" rx="2" ry="2"/>
    <line id="sec2" x1="50" y1="50" x2="50" y2="16" />
  </g>
</svg>
</div>

Demo:http://codepen.io/anon/pen/EjZNyy