javascript css change issue

Question

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>

What's happening that is not correct? What are the symptoms? Use the Dev Console or something to check the background of the div. Is the background image value changing? Is the image not found? — matt
– matt, Commented Dec 12, 2013 at 22:50
Not too familiar with setting css using javascript but you could try setting the css with jQuery instead. $(clock).css('background-image','url(clock/clock1.png)') Are all your if statements getting executed? — Trevor
– Trevor, Commented Dec 12, 2013 at 22:51

cookie monster · Accepted Answer · 2013-12-12 22:50:28Z

2

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.

answered Dec 12, 2013 at 22:50

cookie monster

11k4 gold badges33 silver badges45 bronze badges

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

2 Comments

Ben Over a year ago

perfect, it works now with your code and probably mine too, yours is just a lot neater! I was just calling init(); in the wrong place. cheers

cookie monster Over a year ago

@user2232418: Ah, yeah that'll do it! Glad you got it working.

yMed · Accepted Answer · 2013-12-12 22:58:36Z

0

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();

answered Dec 12, 2013 at 22:58

yMed

654 bronze badges

Collectives™ on Stack Overflow

javascript css change issue

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related