[Solved] document.elementbyid function not working in div [closed]

by


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

They are:

  1. you need to use document.getElementById
  2. you need to set document.getElementById('ship').className (not document.getElementById('ship').style.backgroundImage.className )
  3. 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>

3

solved document.elementbyid function not working in div [closed]