Unordered List Not Working in FF w/script

Discussion in 'JavaScript' started by rutabaga, Sep 2, 2009.

0
  1. #1
    I've been working quite awhile on this problem. I recently took the original script/html from online & started to make changes one by one for my own website into the original script. (Previously, I built my website based on the script & it ran fine on IE but not on FF. I ran firebug & found the problem area, but have not discovered why so have not been able to fix it.) Now I have determined the reason for the problem of null value in my variable "currentTarget". When I made a change to an Id in the unordered list or added to the list, at the same time changing or adding the link, is when the null value started to appear in FF—but not in IE. Does anyone have any idea why changing or adding to an unordered list would create this null value in FF?

    Here is my html code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled 1</title>

    <link rel="stylesheet" type="text/css" href="style.css" />
    <script type="text/javascript" src="script.js"></script>
    <!--<script type="text/javascript"> -->
    <!--<style type="text/css"> -->
    </head>

    <body>

    <div id="header">
    <div id="scatleaImage">
    <h2>Scattered Leaves</h2>
    </div>

    <p class="styleBookName">by J. D. Roque</p> <br />

    <div id="chapterSamples">Samples of Stories
    <div id="storyNames">
    <ul id="chapters">
    <li><a href="#The Word">The Word</a></li>
    <li><a href="#lorem">lorem</a></li>
    <li><a href="#ipsum">Ipsum</a></li>
    <li><a href="#dolor">Dolor</a></li>
    <li><a href="#sit">Sit</a></li>
    <li><a href="#What Goes Around">What Goes Around</a></li>
    </ul>
    </div>
    </div>
    </div>

    <div id="maincontent">
    <h2 class="aboutStories">Samples</h2>

    <p id="The Word" class="content"><strong><em> The Word:&nbsp; </em></strong>"At our house</p>
    <p id="lorem" class="content"><strong><em> The Word: &nbsp; </em></strong>"At our house, the penalty for uttering <em>the word</em>
    is to get your mouth washed out with the yellow Fels Naphtha soap Ma uses when she mops the wood floors." <br />
    </p>
    <p id="ipsum" class="content"><strong><em> Ipsum: &nbsp; </em></strong>In hac habitasse platea dictumst. Aenean tempor mattis arcu.</p>
    <p id="dolor" class="content"><strong><em> Dolor: &nbsp; </em></strong>Maecenas sit amet turpis. Vivamus ac justo. Fusce in tortor.</p>
    <p id="sit" class="content"><strong><em>Sit: &nbsp; </em></strong>Duis ornare urna et velit. Phasellus vulputate turpis vitae quam.</p>
    <p id="What Goes Around" class="content"><strong><em>What Goes Around:&nbsp; </em></strong>"Although"</p>
    </div>
    </body>
    </html>

    Here is the jscript:

    function addNormalClass() {
    this.className = 'normal';
    }

    function highlightTarget() {
    // Collect the relevant items:
    var contentsArticles = document.getElementById('maincontent').getElementsByTagName('p');
    // Loop through them:
    for (var j=0;j<contentsArticles.length;j++) {
    if (contentsArticles[j].className == 'highlighted') {
    // If one of them has a class name of 'highlighted,' change it to 'normal':
    contentsArticles[j].className = 'content';
    }
    }

    // What is the url of the clicked link?
    var url = this.href;
    // Get everything after the '#' in the link--that's our id
    var elementId = url.substring(url.lastIndexOf('#') + 1);
    // Get the element:
    var currentTarget = document.getElementById(elementId);
    // Change its classname:
    alert(currentTarget);
    currentTarget.className = 'highlighted';
    alert(currentTarget.className);
    }

    function buildContentsArray() {
    // First collect all the links to contents and the contents they link to:
    var contentsLinks =
    document.getElementById('chapters').getElementsByTagName('a');
    var contentsArticles =
    document.getElementById('maincontent').getElementsByTagName('p');

    // Loop through the links:
    for (var i=0;i<contentsLinks.length;i++) {
    // Call a function when the links are clicked AND when a highlighted article is clicked:
    contentsLinks.onclick = highlightTarget;
    contentsArticles.onclick = addNormalClass;
    }
    }

    window.onload = buildContentsArray;

    This is the css code for highlighted:

    .highlighted {
    background-color: #CCFFFF;
    padding: 0px 20px 0px 20px;
    margin: 5px 5px 10px 5px;
    font-family: Arial, Helvetica, sans-serif;
    color: #BCBCBC;
    }
     
    rutabaga, Sep 2, 2009 IP