This site is best viewed in a modern browser with JavaScript enabled.

Need help writing java script for an html, please look.

drumfreak29

Ok , the problem is

Scroll down to the div element with id value maps and replace the line
<img id="sky" src="sky0.jpg" alt="" />
with a script element that writes the following html code:
<img id='sky' src='mapNum.jpg' alt=' ' />
were mapNum is the value of the mapNum Variable.

I've been redoing this several times and can't seem to get everywhere,
I had to do a similar thing with the clock but got it to work right away.

Any help is greatly appreciated!

<?xml version="1.0" encoding="UTF-8" ?>

<!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>

<!--

New Perspectives on HTML and XHTML 5th Edition

Tutorial 10

Case Problem 1

SkyWeb Planisphere

Author: Nick Harms

Date: 4/21/2010

Filename: skymap.htm

Supporting files: datetime.js, mask.gif, sky0.jpg - sky23.jpg, skyweb.css,

-->

<title>SkyWeb: The Planisphere</title>

<link href="skyweb.css" rel="stylesheet" type="text/css" />

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

<script type="text/javascript">

/*

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=getMap();

</script>

</head>

<body>

<div id="pageContent">

<div id="logo">

<img src="skyweb.jpg" alt="SkyWeb" />

</div>

<div id="maps">

<script type="text/javascript">

document.write('<img id="sky" src="sky' + getMap() + '.jpg" alt="sky map"' />');

</script>

<img id="mask" src="mask.gif" alt="" />

<div id="datetime">

<script type="text/javascript">

document.write(timeStr);

</script>

</div>

<div id="content">

<h1>The Planisphere</h1>

<p>A <b>planisphere</b> is a visual aid to astronomers and stargazers.

It consists of two disks: one displays all of the visible

constellations in the night sky, and the other covers the first

and contains a window that indicates the portion of the sky currently

visible. The second disk is then rotated to match the current date and

time. Planispheres come in a variety of sizes and types. The important

thing to remember is that you must have a planisphere that matches

the longitude of your stargazing location.</p>

<p>On the right is an online planisphere. It consists of two images. The

bottom image contains the sky map; the top image contains the viewing

window. Rather than turning the viewing window, this planisphere is

automatically rotated for you, displaying the current date and time

and visible constellations for observers at a longitude of

40<sup>°</sup> North. To update the planisphere you can click

the <span class="button">Refresh</span> or

<span class="button">Reload</span> button on your browser. The planisphere

will change, representing the nighttime sky to the nearest hour.</p>

</div>

<div id="links">

| <a href="#">Home Page</a>

| <a href="#">The Night Sky</a>

| <a href="#">The Moon</a>

| <a href="#">The Planets</a>

| <a href="#">The Messier Objects</a>

| <a href="#">Stars</a> |

</div>

</body>

</html>

tirna

Maybe try:

 
document.write("<img id='sky' src='"+mapNum+".jpg' alt=' ' />");

but the variable mapNum must already be assigned a value when this line of code is run for this to work. If mapNum isn't assigned yet, then set the src of the image as an onload event after the <body> has completed loading by which time I assume mapNum is assigned a velue.

drumfreak29

ok, in my book it says "where mapNum is the value of the mapNum variable....does that help at all? Im not sure how to do that, My book has horrible explanations of java script, I've done exceedingly well at everything else. Thanks!

drumfreak29

Well actually I added what you told me too and the mapNum is already assigned the value returned by the getMap() function. because my book told me to declare a variable called mapNum and assign its value to what is returned by the getMap() function

mavigozler

First of all, I can see where you might be struggling. For DOCTYPE XHTML documents, you can't use the method [FONT="Courier New"]document.write()[/FONT] because it does NOT exist. That little helpful method only works in HTML, as I recall. Do you really need to use XHTML? It is a PITA for one thing, and requires excessive tag verbosity. You can get best-practices HTML by always validating with DOCTYPE Strict HTML instead of XHTML, in which document.write() method works.
To scroll to a place in the document, set a tag (it can be an anchor '<a>' element or any element) with an id attribute '[FONT="Courier New"]id=[/FONT]value-of-id-attribute' and then use the script '[FONT="Courier New"]location.href="#value-of-id-attribute"[/FONT]'
Changing node attributes and attribute values through script ought to be just as easy, assuming the attributes and attribute values are NOT readonly. Get the node object using '[FONT="Courier New"]document.getElementById()[/FONT]' method, which requires you rendering the element with an 'id' attribute, or iterate (in a for loop) through a node list retrieved by [FONT="Courier New"]document.getElementsByTagName()[/FONT] method and break from the loop by looking for a condition such as an attribute name that is set or its particular value. After finding the node through either of those methods, manipulate the node attributes using dot notation or dereferencing:

var myImgNode = document.getElementById("sky");
myImgNode.src = "mapNum.jpg";

drumfreak29

Sorry, but non of that is what im supposed to do, My teacher has approved of everything but the img line. The code isn't supposed to scoll that is telling me to scroll in my editor to go were my work should be done. basically this should display a different image depending on the time, so like the previous person said, maybe the page should load first, can one of you show me how to add the onLoad piece to what they previously suggested, many thanks

mavigozler

drumfreak29;1084008 wrote:
Sorry, but non of that is what im supposed to do, My teacher has approved of everything but the img line.

Really, your TEACHER says that the method document.write() works in XHTML documents???

Have your "teacher" read this, and then you or your teacher should make a post here explaining why your teacher should be teaching something else other than XHTML.

The code isn't supposed to scoll that is telling me to scroll in my editor to go were my work should be done. basically this should display a different image depending on the time, so like the previous person said, maybe the page should load first, can one of you show me how to add the onLoad piece to what they previously suggested, many thanks

I am not understanding your English much at all.

The onload attribute is legal only for the body element for classic DOM. For the BOM, it is also legal in the global (window) object. Browsers allow for onload attribute to be set in IMG elements, but technically that is not legal/standard in the HTML spec, and so thus it is a risky use of an extension. But it is not necessary to use the onload attribute in IMG elements. Use it in the body element (<body onload="initializePage();">) and then from within intializePage() contained in a script element within the head element, get the image node---already rendered in the DOM, since onload is called after building the entire DOM---using document.getElementById() and make the manipulations.

tirna

mavigozler;1084011 wrote:
Really, your TEACHER says that the method document.write() works in XHTML documents???

Yes document.write() does work in XHTML while the page is loading.

I use

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/URL]">
<html xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]">

on all my web pages and I use something like

document.write('<a title="Click to write and send me an email." href="'+part10+part4+'">'+partsSum+'</a>');

on my 'contact' page to display my email address but hide it from bots and email address harvesters.

The above document.write() works fine without any problems.

Another example. You will find that this XHTML page also works and displaye "Hello World".

<!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>
<title></title>
</head>
<body>

<script type="text/javascript">
document.write("<p>Helo World..!!<p>");
</script>

</body>
</html>

fyi - I am not his/her teacher

drumfreak29

well can you help me finish adding the onload event, I don't know how and I don't know what else to do.

tirna

does your teacher allow his or her students to get code from forums like this one to copy and paste into their class work or assignments?

Should you really be asking your teacher instead?

drumfreak29

tirna;1084016 wrote:
does your teacher allow his or her students to get code from forums like this one to copy and paste into their class work or assignments?

Should you really be asking your teacher instead?

Yes, this is an online class and I do not go to an actual class, making it difficult to get help, he actually tells me that he likes seeing us go out and work with others.

drumfreak29

drumfreak29;1084018 wrote:
Yes, this is an online class and I do not go to an actual class, making it difficult to get help, he actually tells me that he likes seeing us go out and work with others.

I only ask for help when I am really stuck, I take much more pride in doing it myself, but I can not for the love of me figure this out, my book offers no help on img stuff only using script to write email stuff, like you showed earlier

tirna

ok then

The code I suggested back in my first post should fix your problem.

If it doesn't, post your entire code and the error message you get.

drumfreak29

still does not display my image, I am using text pad and it does not show errors.

<?xml version="1.0" encoding="UTF-8" ?>

<!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>
<!--
   New Perspectives on HTML and XHTML 5th Edition
   Tutorial 10
   Case Problem 1

   SkyWeb Planisphere
   Author: Nick Harms
   Date:   4/21/2010

   Filename:         skymap.htm
   Supporting files: datetime.js, mask.gif, sky0.jpg - sky23.jpg, skyweb.css,
-->

   <title>SkyWeb: The Planisphere</title>
   <link href="skyweb.css" rel="stylesheet" type="text/css" />
   <script type="text/javascript" src="datetime.js"></script>
   <script type="text/javascript">
   	/*
	   		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=getMap();
</script>
</head>

<body>
<div id="pageContent">

   <div id="logo">
      <img src="skyweb.jpg" alt="SkyWeb" />
   </div>

   <div id="maps">
   <script type="text/javascript">
   document.write("<img id='sky' src='"+mapNum+".jpg' alt=' ' />");
   </script>
   <img id="mask" src="mask.gif" alt="" />

   <div id="datetime">
   <script type="text/javascript">
   document.write(timeStr);
   </script>
</div>
   </div>
   <div id="content">
      <h1>The Planisphere</h1>
      <p>A <b>planisphere</b> is a visual aid to astronomers and stargazers.
         It consists of two disks: one displays all of the visible
         constellations in the night sky, and the other covers the first
         and contains a window that indicates the portion of the sky currently
         visible. The second disk is then rotated to match the current date and
         time. Planispheres come in a variety of sizes and types. The important
         thing to remember is that you must have a planisphere that matches
         the longitude of your stargazing location.</p>
      <p>On the right is an online planisphere. It consists of two images. The
         bottom image contains the sky map; the top image contains the viewing
         window. Rather than turning the viewing window, this planisphere is
         automatically rotated for you, displaying the current date and time
         and visible constellations for observers at a longitude of
         40<sup>&deg;</sup> North. To update the planisphere you can click
         the <span class="button">Refresh</span> or
         <span class="button">Reload</span> button on your browser. The planisphere
         will change, representing the nighttime sky to the nearest hour.</p>
   </div>

   <div id="links">
      | <a href="#">Home Page</a>
      | <a href="#">The Night Sky</a>
      | <a href="#">The Moon</a>
      | <a href="#">The Planets</a>
      | <a href="#">The Messier Objects</a>
      | <a href="#">Stars</a> |
   </div>

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

drumfreak29

the mapNum variable is referencing the getMap() function,
My book says The getMap() function which returns a number from 0 to 23. The number matches the number of the sky map image to show based on the current date and time. That function has been placed in an external javascript file named datetime.js which you can see I accessed in the top of the code.
The timeStr also refers to a function in that file and it actually works. In the project folder there are 0-23 images and I guess the function reads the time and displays the apropriate picture.

tirna

ok, at least you know document.write(timeStr) is working.

Now you need to do some basic debugging.

Maybe try the following:

add an alert() as show below:

 
 alert("mapNum = "+mapNum);
document.write("<img id='sky' src='"+mapNum+".jpg' alt=' ' />");

Say mapNum = 5, then make sure there is a file called 5.jpg in the same folder as the folder where your html file is.

drumfreak29

tirna;1084025 wrote:
ok, at least you know document.write(timeStr) is working.

Now you need to do some basic debugging.

Maybe try the following:

add an alert() as show below:
 
 alert("mapNum = "+mapNum);
document.write("<img id='sky' src='"+mapNum+".jpg' alt=' ' />");
Say mapNum = 5, then make sure there is a file called 5.jpg in the same folder as the folder where your html file is.

actually the files are called sky0-sky23

tirna

Then use

 
document.write("<img id='sky' src='sky"+mapNum+".jpg' alt=' ' />");

and if the images are in a different folder to the one your html file is in then you have to insert the relative folder path to images' folder infront of 'sky'

drumfreak29

tirna;1084027 wrote:
Then use
 
document.write("<img id='sky' src='sky"+mapNum+".jpg' alt=' ' />");
and if the images are in a different folder to the one your html file is in then you have to insert the relative folder path to images' folder infront of 'sky'

YOU ARE MY HERO!!!! THANK YOU SO MUCH!
I see your from australia, im from ks in the states, I would love to visit you all down there though, Keith Urban is the reason I started playing guitar!

Cheers!
Have a wonderful weekend and thanks again!
Nick

tirna

no problem - happy to help and I'm glad you sorted it out