JS script not running?

Question

Have no experience with JS or JQuery.

I'm trying to use this: http://codepen.io/highplainsdrifter/pen/Aicls

The clock renders but does not actually work. For the JavaScript, I tried pasting it in between <script></script> tags in the html, and also tried putting it into it's own file and referring to it <script src="./clock.js"></script>

Is something missing from this, some semicolon or punctuation?

var clockH = $(".hours");
var clockM = $(".minutes");
var clockS = $(".seconds");

function time() {     
  var d = new Date(),
      s = d.getSeconds() * 6,
      m = d.getMinutes() * 6,
      h = d.getHours() % 12 / 12 * 360;  
    clockH.css("transform", "rotate("+h+"deg)");
    clockM.css("transform", "rotate("+m+"deg)"); 
    clockS.css("transform", "rotate("+s+"deg)");    
}
var clock = setInterval(time, 1000);

=========

Updates. Ok, so here is what I have in my js file:

$(document).ready(function(){
var clockH = $(".hours");
var clockM = $(".minutes");
var clockS = $(".seconds");

function time() {     
  var d = new Date(),
      s = d.getSeconds() * 6,
      m = d.getMinutes() * 6,
      h = d.getHours() % 12 / 12 * 360;  
    clockH.css("transform", "rotate("+h+"deg)");
    clockM.css("transform", "rotate("+m+"deg)"); 
    clockS.css("transform", "rotate("+s+"deg)");    
}
var clock = setInterval(time, 1000);

});

In the HTML:

<script src="./jquery.js"></script>
<script src="./clock.js"></script>

and

<div class="clock">
    <span class="hours"></span>
    <span class="minutes"></span>
    <span class="seconds"></span>
    <span class="midday"></span>
    <span class="three"></span>
    <span class="six"></span>
    <span class="nine"></span>
</div>

Finally, in my css:

body { background: #574b57; }

.clock {
    background-color:#c7c7c7;
    width: 250px;
    height: 250px;
    border: 4px solid #999;
    border-radius: 100%;
    position: relative;
    margin: 20px auto;
    -moz-box-shadow: 1px 5px 5px rgba(0,0,0,0.6);
      -webkit-box-shadow: 1px 5px 5px rgba(0,0,0,0.6);
      box-shadow: 1px 5px 50px rgba(0,0,0,0.6);
}
.clock:after {
    background:#FFF;
    border-radius: 10px;
    border:#FFF 5px solid;
    content:"";
    left:50%;
    position:absolute;
    top:50%;
    margin-left: -5px;
    margin-top: -5px;
    -moz-box-shadow: 1px 5px 5px rgba(68,68,68,0.1);
      -webkit-box-shadow: 1px 5px 5px rgba(68,68,68,0.1);
      box-shadow: 1px 5px 5px rgba(68,68,68,0.1);

}
.clock span {
    display: block;
    background: white;
    position: absolute;
    transform-origin: bottom center;
    left: 50%;
    bottom: 50%;
    border-radius: 3px;
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px;

}
.clock .hours {
    height: 30%;
    width: 5px;
    margin-left: -2px;
    -moz-box-shadow: 1px 5px 5px rgba(68,68,68,0.2);
      -webkit-box-shadow: 1px 5px 5px rgba(68,68,68,0.2);
      box-shadow: 1px 5px 5px rgba(68,68,68,0.2);

}
.clock .minutes {
    height: 45%;
    width: 3px;
    margin-left: -1px;
    -moz-box-shadow: 1px 5px 5px rgba(68,68,68,0.2);
      -webkit-box-shadow: 1px 5px 5px rgba(68,68,68,0.2);
      box-shadow: 1px 5px 5px rgba(68,68,68,0.2);
}
.clock .seconds {
    background: #949494;
    height: 47%;
    width: 1px;
    margin-left: 0px;
    -moz-box-shadow: 1px 5px 5px rgba(68,68,68,0.6);
      -webkit-box-shadow: 1px 5px 5px rgba(68,68,68,0.6);
      box-shadow: 1px 5px 5px rgba(68,68,68,0.6);
}
.clock .midday, .clock .three, .clock .six, .clock .nine {
    background: #949494;
    height: 10%;
    width: 6px;
    left: 49%;
    top: 2%;
    -moz-box-shadow: 1px 0px 5px rgba(68,68,68,0.3);
      -webkit-box-shadow: 1px 0px 5px rgba(68,68,68,0.3);
      box-shadow: 1px 0px 5px rgba(68,68,68,0.3);
    border-radius: 3px;
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px;
}
.clock .three {
    top: 49%;
    left: 89%;
    height: 6px;
    width: 10%;
}
.clock .six {
    top: 89%;
    left: 49%;
}
.clock .nine {
    top: 49%;
    left: 1%;
    height: 6px;
    width: 10%;
}

But for some reason this is how the clock looks, any ideas on why so?

enter image description here

The codepen code you posted works in my computer. Does it not for you ? — Sergio
– Sergio, Commented Sep 15, 2013 at 17:44
You can debug it in your browser. In Chrome or Firefox (with Firebug), usually pressing F12 will bring up the dev tools. Place breakpoints in your code, and watch the console for exceptions. — Geeky Guy
– Geeky Guy, Commented Sep 15, 2013 at 17:45
Can you post the whole code? I suspect you are missing some important library? — Neeraj
– Neeraj, Commented Sep 15, 2013 at 17:45
Are you using the exact HTML, CSS and JS from the codepen site? — BenM
– BenM, Commented Sep 15, 2013 at 17:45

BenM · Accepted Answer · 2013-09-15 17:47:01Z

2

As you are using jQuery wrap your function in document.ready like so

$(document).ready(function(){
var clockH = $(".hours");
var clockM = $(".minutes");
var clockS = $(".seconds");

function time() {     
  var d = new Date(),
  s = d.getSeconds() * 6,
  m = d.getMinutes() * 6,
  h = d.getHours() % 12 / 12 * 360;  
clockH.css("transform", "rotate("+h+"deg)");
clockM.css("transform", "rotate("+m+"deg)"); 
clockS.css("transform", "rotate("+s+"deg)");    
}
var clock = setInterval(time, 1000);

});

Also make sure you are referencing jQuery in your script tags.

answered Sep 15, 2013 at 17:47

BenM

4,2682 gold badges34 silver badges58 bronze badges

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

5 Comments

Katie H Over a year ago

Yup, just wasn't wrapped in that jQuery thingy, thanks! Now I just have to figure out why it's all slanted.

BenM Over a year ago

Good to know that fixed it! When using jQuery, it's nearly always mandatory that you use the above method for things to run smoothly. Could you provide a screenshot of the slanted clock?

BenM Over a year ago

I can't say the exact issues but it looks like because the clock's css is using percentages and not absolute measurements (like pixels), the size of the container it is in will matter. Basically you need to place your clock HTML into a container the same size as the one on codepen

Katie H Over a year ago

I'm sorry, I just cant seem to get it right, what is the outer container supposed to look like for its properties, I tried 250 by 250 , that does not seem to work.

user9016207 Over a year ago

shouldnt you use the shorthand $(function() instead of $(document).ready(function() ?

Oscar Barrett · Accepted Answer · 2013-09-15 17:47:24Z

2

The script requires jQuery. The variables with $ are trying to create jQuery objects from the selector that is passed as a parameter.

Place another script tag above the clock script, with the following content:

<script type="text/javascript" src="code.jquery.com/jquery-latest.min.js"></script>

It is also good practice to wrap any code that requires jQuery in a document.ready closure. i.e.

jQuery(document).ready(function($) {
    // Clock script here
});

answered Sep 15, 2013 at 17:47

Oscar Barrett

3,27534 silver badges36 bronze badges

Collectives™ on Stack Overflow

JS script not running?

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related