Java Script to display image and date

[Tewhano]

I am working on an assignment from the book ‘New Perspectives: HTML, CSS and DHTML’ and I am unable to get the code to work. This is an online class and this book is not a desirable choice for this type of class. Basically I am to write code to use a provided java script to display an image and a date. The java file has two functions showDateTime() and get-Map(). I have the following code in the head section:

<script src="datetime.js" type="text/javascript"></script>

    <script type="text/javascript">
    function datetime(timeStr, mapNum){
    alert(mapNum);  
    /*
    timeStr is a text string containing the current date and time
    mapNum is the number of the map to display in the planisphere
    */
    var timeStr = showDateTime();
    var mapNum = get-map();
    }
    </script>

I believe this simply assigns the two variables the return value of the function to be used in the code. This is the code that is supposed to display an image from a collection names sky0.jpg to sky23.jpg by getting the map number from the function. It also returns the system’s date/time. Here is the code I am using:

<div id="maps">
<!-- <img id="sky" src="sky0.jpg" alt="" /> original code to be replaced by the script -->
<script type="text/javascript"
document.write('<img id="sky" src="sky' + mapNum + '.jpg" alt=" " />'); 
</script>
<img id="mask" src="mask.gif" alt="" />
<div id="datetime">
<script type="text/javascript">
document.write(timeStr);
</script>
</div>
</div>

My problem is that nothing happens, no image, no date. If anybody could shed light on what I am doing wrong it sure would be appreciated. I do not have a lot of hair to pull out.

[radhakrishna.p]

hai Tewhano

instead of this in your code

    <div id="maps">
    <!-- <img id="sky" src="sky0.jpg" alt="" /> original code to be replaced by the script -->
    <script type="text/javascript"
    document.write('<img id="sky" src="sky' + mapNum + '.jpg" alt=" " />');
    </script>
    <img id="mask" src="mask.gif" alt="" />
    <div id="datetime">
    <script type="text/javascript">
    document.write(timeStr);
    </script>
    </div>
    </div>

try to replace code (like this)

    <div id="maps">
        <img id="sky" src="sky0.jpg" alt="" />  <!-- this is justsetting for intial image to display -->
        <img id="mask" src="mask.gif" alt="" />
    <div id="datetime">
       // date time content is to display here 
    </div>
    </div>       
    <script type="text/javascript">
        document.getElementById("sky").src= "sky' + mapNum + '.jpg";
        document.getElementById("datetime").inneHTML= timeStr;
    </script>

check this let me know the status

and also let me know why you are used <img id="mask" src="mask.gif" alt="" /> this image ?

happy coding

[Tewhano]

Thanks for your help. The mask covers the image with an oval 'window' showing the current night sky depending on the date returned by showDateTime(). To best explain why I am using <img id="mask"... code it is best if you look here:

http://ivytech.eta-carina-ltd.com/session11/skymap.htm   'code on that page is not complete'

This is still not working. I get a small red X at the upper-left of the div and the statement "// date time content is to display here" where the date should be. I am wondering if it has something to do with Windows 7? I use four different browsers to view my code.

[radhakrishna.p]

hai Tewhano

have you included the scripts which is relating to getting datetime and get-map() methods in the above post while running the page?

i mean your final script would be like as follows

 <script type="text/javascript">
    var timeStr = showDateTime(); 
    var mapNum = get-map();
    document.getElementById("sky").src= "sky' + mapNum + '.jpg";
    document.getElementById("datetime").inneHTML= timeStr;
</script>

please check it once

let me know the status

[Tewhano]

I declared the varibles in the script between the head tags. See my first post, the code is the first one at the top of the post. But I didn't do the getElementById() there, I did that in the body. The function is in the datetime.js file by the way. I am going to code it and upload it to see if it works on another machine; I am wondering if it is an issue with Windows 7.

[Tewhano]

The problem turned out to be the <script> line of code in the <head> section where I have the function reference. The file is actually an external file and I shouldn’t have placed that reference there. Thanks for your help.

[radhakrishna.p]

please mark this thread as solved if you got your answer