having issue with background-image using JavaScript

Question

I want integreat this JavaScript code to change the background-image depending on current time . the problem is nothing show up if i put the code in a simple html file.

The code is woking live here though: http://jsbin.com/femem/1/edit

here is the code:

HTML:

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>JS Bin</title>

        <script src="js/bg.js"></script>

    </head>
    <body>
    <h1>
        some text
    </h1>
    </body>
    </html>

code JavaScript:

     var d = new Date(),
        h = d.getHours(),
        i;

    if (h < 6) {
        i = "http://placehold.it/450x150";
    } else if (h < 10) {
        i = "http://placehold.it/250x150";
    } else if (h < 18) {
        i = "http://placehold.it/350x150";
    } else if (h < 23) {
        i = "bgbody.jpg";
    } else {
        i = "http://placehold.it/450x150";
    }

    document.body.style.background = "url(" + i + ")";

If it's working on jsbin, there's not much we can help with, there's not a lot that could go wrong with that code? — adeneo
– adeneo, Commented Mar 8, 2014 at 22:52
if I run the code locally, it don't work, it work only on JSbin — Asme Just
– Asme Just, Commented Mar 8, 2014 at 22:56
Then open the browser console and check for errors, something is obviously wrong. — adeneo
– adeneo, Commented Mar 8, 2014 at 22:57
here is the errorI get on the browser consol Uncaught TypeError: Cannot read property 'style' of null — Asme Just
– Asme Just, Commented Mar 8, 2014 at 22:59

Niet the Dark Absol · Accepted Answer · 2014-03-08 22:58:46Z

1

At the point when the script is run, the <body> has not been reached yet and therefore document.body is undefined (as the error you get in the console should tell you).

To fix this, simply move your script inside the <body> - it can be right at the top if you want.

Alternatively, with basic PHP:

<body style="background-image:url(<?php
    $h = date("H");
    if( $h < 6) echo "http://placehold.it/450x150";
    elseif( $h < 10) echo "http://placehold.it/250x150";
    elseif( $h < 18) echo "http://placehold.it/350x150";
    elseif( $h < 23) echo "bgbody.jpg";
    else echo "http://placehold.it/450x150";
?>)">

This would avoid a "Flash of Unstyled Content" (FOUC)

answered Mar 8, 2014 at 22:58

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

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

9 Comments

Asme Just Over a year ago

But where can I put this PHP code if am using WordPress?

Niet the Dark Absol Over a year ago

The PHP code relies on you being able to use PHP. If you can't, then you can't use it and will have to rely on the JavaScript instead.

Asme Just Over a year ago

oh, I got it... I didn't see that it was on the open body tag. Thanks.

Asme Just Over a year ago

Hello, I have a question, if I want add a background-attachment:fixed; propriety, how can I add it? i've try to add it in my CSS but it is not applied.

Niet the Dark Absol Over a year ago

Yes, I understand, but using .style.background NUKES any other background-* properties you have on there.

|

Collectives™ on Stack Overflow

having issue with background-image using JavaScript

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related