Home/ Questions/Q 6644025
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T00:07:09+00:00

I cannot seem to get this to work. I have a small JS file

  • 0

I cannot seem to get this to work. I have a small JS file that switches banners depending on the time of day, but it seems that doing an external reference in my PHP file does not work. It works fine in an HTML page.

This is the code in the JavaScript file.

function getStylesheet() {
    var currentTime = new Date().getHours();
    if (7 <= currentTime && currentTime < 19) {
        document.write("<img src='images/banner_day.jpg'>");
    } else {
        document.write("<img src='images/banner_night.jpg'>");
    }
}

getStylesheet();

And here is the reference code I used to call the JavaScript file. Its in a PHP file.

<script src="http://beta.website.com/wp-content/themes/theme/scripts/banner.js"></script>

Everything on the PHP page shows up in the browser, except for the banner that I tried to call with the script.

Here is the entire PHP file code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div id="main">
<div class="container">
<div id="header">
<div id="logo">
<a href="http://bifffffdggdch.com"><img src="http://beta.dfdfdf.com/wp-content/themes/asdafd/images/logo.png" /></a>
</div>
<div id="shadow2"></div>
<div id="shadow1"></div>
<ul id="menu">
<li><a href="">df</a></li>
<li><a href="">df</a></li>
<li><a href="">fd df df</a></li>
<li><a href="">The asfdssd asdfds</a></li>
<li><a href="">sf</a></li>
<li><a href="">df</a></li>
<li><a href="">dfd</a></li>
</ul>
<div id="slogan"><big>"fasfdsads2005."</big></div>
<div id="loginDiv">Login Panel Here</div>
</div>
<div id="banner">
<script src="http://beta.adsfasfasfd.com/wp-content/themes/adfadsf/scripts/banner.js"></script></div>
<div class="sidebar">
Sidebar Content<br />
<br /><br /> 

blah
blah
blah
</div>

<div class="content">
Main Content

<br />
<br />
<br />

<br />
<br />
<br />

</div>

<div id="footer">
<div class="container">
        <div class="footer_column long">
          <h3>Cadsfadsfafdfsd.com All Rights Reserved</h3>
          <p>dsafasdfdffadffadsdafsdfsadafsdfsadfas</p>
        </div>
        <div class="footer_column2">
              <h3>More Links</h3>   
              <ul>
              <li><a href="http://aadfsdfsdfa.
              com">asfsdfa</a></li>
              <li><a href="http://ItsNotch.
              com">ItsNotch</a></li>
              <li><a href="http://adfasfsfaf.
              com">adsfasf</a></li>
              <li><a href="http://twitter.
              com/safs">Twitter</a></li>
              <li><a href="https://www.facebook.com/group.php?gid=10215yy20340498">Facebook Fan Page
              </a></li>
              </ul>
        </div>
        <div class="footer_column2">
              <h3>RSS</h3>
              <ul>
              <li><a href="">RSS Feed</a></li>
              <li><a href="">What is RSS?</a></li>
              </ul>
        </div>

    </div>
  </div>
</div>
</div>
</div>
</div>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try changing your Javascript to this:

    window.onload = function () {

  // Uncomment this line to make sure the script is loading/running, then delete it
  // alert('Hello, your Javascript is running');

  // Declare variables
  var currentTime, bannerDiv, newImg;
  // Get currentTime
  currentTime = new Date().getHours();
  // Get 'banner' div
  bannerDiv = document.getElementById('banner');
  // Get create a new <img>
  newImg = document.createElement('img');
  // Assign a src="" attribute depending on the time
  newImg.src = (currentTime > 7 && currentTime < 19) ? 'images/banner_day.jpg' : 'images/banner_night.jpg';
  // add the new image to the document
  bannerDiv.appendChild(newImg);

};

    And put it in the <head> of the document, so change

    <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  </head>
  <body>
    <!-- ....... -->
    <div id="banner">
      <script src="http://beta.adsfasfasfd.com/wp-content/themes/adfadsf/scripts/banner.js"></script>
    </div>
    <!-- ....... -->

    …to:

    <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <script type="text/javascript" src="http://beta.adsfasfasfd.com/wp-content/themes/adfadsf/scripts/banner.js"></script>
  </head>
  <body>
    <!-- ....... -->
    <div id="banner"></div>
    <!-- ....... -->

    If it still doesn’t work, one of two things is happening:

    • Your javascript file is not actually at http://beta.adsfasfasfd.com/wp-content/themes/adfadsf/scripts/banner.js so the script cannot be loaded/run. Uncomment the first line to confirm that the script is running.
    • Your banner images cannot be found at images/banner_night.jpg – make sure your relative paths are correct.
    • 0