document.elementbyid function not working in div

Question

I have written a code to change the background as per day time. If i am applying it to whole body, its working fine but when i am trying to put it inside a div,its not working. Please see my code and guide me through the error.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<style>
/*reset*/ h1,h4 {margin:0;}
/* basic styles */
h1 { margin-bottom: 10px; }
div { 
width: 680px;
padding: 10px 25px;
margin: 50px auto;
border-radius: 7px;
background: rgba(255, 255, 255, 0.4); 
color: #1F1F1F;
}

/* backgrounds */
.day { background: url('http://imgs.mi9.com/uploads/photography/4480/white-clouds-and-          blue-sky_1600x1200_78556.jpg'); }
.sunset { background:   url('http://www.naturewallpaper.eu/desktopwallpapers/sky/1366x768/after-sunset-sky-  1366x768.jpg'); }
.night { background: url('http://images2.layoutsparks.com/1/159946/moon-girl-night- sky.jpg'); }
#ship{width:60%; height:100px; border:#30C 1px solid;}
</style>
</head>

<body>
<div id="ship">
<script>
$(document).ready(function(){
var d = new Date();
var n = d.getHours();
if (n > 19 || n < 6)
 // If time is after 7PM or before 6AM, apply night theme to ‘body’
  document.elementById('ship').style.backgroundImage.className = "nighta";
else if (n > 16 && n < 19)
  // If time is between 4PM – 7PM sunset theme to ‘body’
  document.elementById('ship').style.backgroundImage.className = "sunset";
else
  // Else use ‘day’ theme
  document.elementById('ship').style.backgroundImage.className = "day";
});

</script>
</div>
</body>
</html>

Why not use the jQuery library as it's intended? `$("#ship")` — Austin Mullins, Jul 05 '14 at 14:53
_What_ is the error? Also, this is not a place for "guiding you through the error". You need a conversational venue for that, such as a chat room or discussion forum. Stack Overflow is a Q&A, more like a FAQ. — Lightness Races in Orbit, Jul 05 '14 at 14:55
no error is being showed. The div where image needs to be displayed is empty. — Shail, Jul 05 '14 at 14:57

score 0 · Answer 1 · answered Jul 05 '14 at 14:48

0

It is document.getElementById('id') and not what you are using.

Learn more about it at MDN

answered Jul 05 '14 at 14:48

Amit Joki

58,320
7
77
95

...and then forget about it and use the jQuery functions. – Lightness Races in Orbit Jul 05 '14 at 14:56

enhzflep · Accepted Answer · 2014-07-05T19:30:48.850

Wow, quite the number of errors here - both in spelling and basic approach.

They are:

you need to use document.getElementById
you need to set document.getElementById('ship').className (not document.getElementById('ship').style.backgroundImage.className )
you need to ensure that you change the name of the css class to nighta or change your code so that it sets it to night

Do this, and if you're in a night-time period currently, you'll see a black background with a few clouds.

Like this: enter image description here

[edit: code added]

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style>
/*reset*/ h1,h4 {margin:0;}
/* basic styles */
h1 { margin-bottom: 10px; }
div { 
width: 680px;
padding: 10px 25px;
margin: 50px auto;
border-radius: 7px;
background: rgba(255, 255, 255, 0.4); 
color: #1F1F1F;
}

/* backgrounds */
.day { background: url('http://imgs.mi9.com/uploads/photography/4480/white-clouds-and-          blue-sky_1600x1200_78556.jpg'); }
.sunset { background:   url('http://www.naturewallpaper.eu/desktopwallpapers/sky/1366x768/after-sunset-sky-  1366x768.jpg'); }
.night { background: url('http://images2.layoutsparks.com/1/159946/moon-girl-night- sky.jpg'); }
#ship{width:60%; height:100px; border:#30C 1px solid;}
</style>
</head>

<body>
<div id="ship">
<script>
window.addEventListener('load', onPageLoaded, false);

function onPageLoaded()
{
    var d = new Date();
    var n = d.getHours();
    var className;
    if (n > 19 || n < 6)
        className = "night";
    else if ((n > 16) && (n < 19))
        className = "sunset";
    else
        className = "day";

    document.getElementById("ship").className = className;
}

</script>
</div>
</body>
</html>

i made the changes that you have mentioned but still result,,, a blank div. — Shail, Jul 05 '14 at 18:48
@Shail - you can't have. I made those changes and it works. Either you've missed something, or your browser belongs in a toilet bowl. I've updated my answer with a working copy. Note I've also removed the reliance on jQuery and I've reduced the size of the code in your js function. :) — enhzflep, Jul 05 '14 at 19:30
yes its working now.. thanks alot. I hope picture will change with sunrise. :) — Shail, Jul 05 '14 at 20:21

score 0 · Answer 3 · edited May 23 '17 at 12:05

0

I have commented out the JS codes and underneath each you can see an equivalent in jQuery.

<script>
$(document).ready(function(){
  var d = new Date();
  var n = d.getHours();
  if (n > 19 || n < 6)
     // If time is after 7PM or before 6AM, apply night theme to ‘body’
     // document.getElementById('ship').className = "night";
       $("#Ship").toggleClass("night");
  else if (n > 16 && n < 19)
     // If time is between 4PM – 7PM sunset theme to ‘body’
    // document.getElementById('ship').className = "sunset";
       $("#ship").toggleClass("sunset");
 else
    // Else use ‘day’ theme
    // document.getElementById('ship').className = "day";
      $("#ship").toggleClass("day");
});  
</script>

Sources: W3Schools - Style backgroundImage Property, StackOverflow - Change an element's CSS class with JavaScript, W3Schools - jQuery - Get and Set CSS Classes

edited May 23 '17 at 12:05

Community

1
1

answered Jul 05 '14 at 15:24

Hamed

869
10
26

@Hamed-- tried but still no result – Shail Jul 05 '14 at 18:55
@Shail, are you running you file locally? try adding `http:` before your JQuery sources in the head tag! – Hamed Jul 08 '14 at 17:09
its working noe Hamed, thanks alot for your help – Shail Jul 08 '14 at 20:17
@Shail, please don't forget to accept the proper answer (the green tick)! glad to be of help :) – Hamed Jul 08 '14 at 21:04

document.elementbyid function not working in div

3 Answers3