www.webdeveloper.com
Results 1 to 15 of 23

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

Hybrid View

  1. #1
    Join Date
    Apr 2010
    Posts
    11

    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"
    # "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>
    # <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>
    #
    # </div>
    # </body>
    # </html>

  2. #2
    Join Date
    Mar 2010
    Posts
    2,803
    Maybe try:

    Code:
     
    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.

  3. #3
    Join Date
    Apr 2010
    Posts
    11
    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!

  4. #4
    Join Date
    Apr 2010
    Posts
    11
    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

  5. #5
    Join Date
    Jun 2009
    Location
    Miami
    Posts
    118
    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:

    Code:
    var myImgNode = document.getElementById("sky");
    myImgNode.src = "mapNum.jpg";
    Last edited by mavigozler; 04-24-2010 at 10:42 PM.

  6. #6
    Join Date
    Apr 2010
    Posts
    11
    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

  7. #7
    Join Date
    Jun 2009
    Location
    Miami
    Posts
    118
    Quote Originally Posted by drumfreak29 View Post
    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.
    Last edited by mavigozler; 04-24-2010 at 11:11 PM.

  8. #8
    Join Date
    Mar 2010
    Posts
    2,803
    Quote Originally Posted by mavigozler View Post
    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

    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">
    on all my web pages and I use something like

    Code:
    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".

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

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

    </body>
    </html> 

    fyi - I am not his/her teacher
    Last edited by tirna; 04-24-2010 at 11:59 PM.

  9. #9
    Join Date
    Apr 2010
    Posts
    11
    well can you help me finish adding the onload event, I don't know how and I don't know what else to do.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles