CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ben
Ben

Reputation: 2725

javascript css change issue

The code should be fairly simple but im not sure why its not working its making me go insane. It should just get the clock id and then just change its background dynamically based on the time. The code i have is

init();
function init(){
var clock = document.getElementById('clock');
var currentdate = new Date();
var datetime = currentdate.getHours();
if(datetime==1||datetime==13){
clock.style.backgroundImage="url(clock/clock1.png)";
}
else if(datetime==2||datetime==14){
clock.style.backgroundImage="url(clock/clock2.png)";
}
else if(datetime==3||datetime==15){
clock.style.backgroundImage="url(clock/clock3.png)";
}
else if(datetime==4||datetime==16){
clock.style.backgroundImage="url(clock/clock4.png)";
}
else if(datetime==5||datetime==17){
clock.style.backgroundImage="url(clock/clock5.png)";
}
else if(datetime==6||datetime==18){
clock.style.backgroundImage="url(clock/clock6.png)";
}
else if(datetime==7||datetime==19){
clock.style.backgroundImage="url(clock/clock7.png)";
}
else if(datetime==8||datetime==20){
clock.style.backgroundImage="url(clock/clock8.png)";
}
else if(datetime==9||datetime==21){
clock.style.backgroundImage="url(clock/clock9.png)";
}
else if(datetime==10||datetime==22){
clock.style.backgroundImage="url(clock/clock10.png)";
}
else if(datetime==11||datetime==23){
clock.style.backgroundImage="url(clock/clock11.png)";
}
else if(datetime==0||datetime==12){
clock.style.backgroundImage="url(clock/clock12.png)";
}
}

and the HTML is 

<div id="clock"><img src="clock/pill.png" alt="pill image" id="pillpic"/></div>

Upvotes: 2

Views: 94

Answers (2)

yMed
yMed

Reputation: 65

function init(){
var clock = document.getElementById('clock');
var currentdate = new Date();
var datetime = currentdate.getHours();
    datetime = datetime >= 12 ? datetime-12 : datetime;
    clock.style.backgroundImage="url(clock/clock"+datetime+".png)";
}
init();

Upvotes: 0

cookie monster
cookie monster

Reputation: 10972

Your code will work fine as long as it's running after the clock element has loaded. Be sure to put your script below that element, or use an event handler that runs after the DOM is loaded.

Here's a cleaned up version of your code.

init();

function init() {
    var clock = document.getElementById('clock');
    var t = (new Date().getHours() % 12) || 12;

    clock.style.backgroundImage = "url(clock/clock" + t + ".png)";
}

DEMO: http://jsfiddle.net/EnN6s/

Also make sure your image path is correct.

Upvotes: 2

Related Questions