Need help writing java script for an html, please look.
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"
# <html xmlns="http://www.w3.org/1999/xhtml">
# 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" />
# 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();
# <div id="pageContent">
# <div id="logo">
# <img src="skyweb.jpg" alt="SkyWeb" />
# <div id="maps">
# document.write('<img id="sky" src="sky' + getMap() + '.jpg" alt="sky map"' />');
# <img id="mask" src="mask.gif" alt="" />
# <div id="datetime">
# <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 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> |
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.
document.write("<img id='sky' src='"+mapNum+".jpg' alt=' ' />");
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!
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
1. First of all, I can see where you might be struggling. For DOCTYPE XHTML documents, you can't use the method document.write() 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.
2. 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 'id=value-of-id-attribute' and then use the script 'location.href="#value-of-id-attribute"'
3. 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 'document.getElementById()' method, which requires you rendering the element with an 'id' attribute, or iterate (in a for loop) through a node list retrieved by document.getElementsByTagName() 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";
Last edited by mavigozler; 04-24-2010 at 09:42 PM.
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
Really, your TEACHER says that the method document.write() works in XHTML documents???
Originally Posted by drumfreak29
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.
I am not understanding your English much at all.
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
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.
Last edited by mavigozler; 04-24-2010 at 10:11 PM.
Yes document.write() does work in XHTML while the page is loading.
Originally Posted by mavigozler
on all my web pages and I use something like
on my 'contact' page to display my email address but hide it from bots and email address harvesters.
document.write('<a title="Click to write and send me an email." href="'+part10+part4+'">'+partsSum+'</a>');
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"
fyi - I am not his/her teacher
Last edited by tirna; 04-24-2010 at 10:59 PM.
well can you help me finish adding the onload event, I don't know how and I don't know what else to do.
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)