SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jul 2003
    Location
    USA
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    DOM error stared at it for days help me!

    Attempting to make an FAQ in which the questions are in a list. They link to a javascript function which writes the answer to a DIV just below the appropriate question, using innerHTML.

    The problem is, I'm new at Javascript and my browser (IE6, haven't tested in others yet) is telling me that "document.getElementById(...) is null or not an object".

    Here's the code:

    var answer=new Array();
    answer[0]="Answer to 1st question.";
    answer[1]="Another answer";
    ...and many more

    var isAll = 0;
    var isID = 0;
    var isLayers=0;
    if(document.getElementById) {isID=1;}
    else {
    if (document.all) {isAll = 1;}
    else {
    browserVersion = parseInt(navigator.appVersion);
    if ((navigator.appname.indexOf('Netscape') != -1) && browserVersion == 4)) {isLayers = 1;}
    }}

    function show(ansnum){
    var space = eval("space" + ansnum);
    if (isID) {document.getElementById(space).innerHTML=' '; document.getElementById(space).innerHTML = answer[ansnum]; }
    else {
    if (isAll) {document.all[space].innerHTML=answer[ansnum]; }
    else {
    if (isLayers) {document.layers[space].document.open(); document.layers[space].document.write(answer[ansnum]); document.layers[space].document.close();}
    }}
    }



    And in the document body:

    <ul>
    <li><a href="javascript:show(0)">Where is the answer to this question?</a><br>
    <div id="space0"> </div>
    <li><a href="javascript:show(1)">Why am I getting an error?</a><br>
    <div id="space1"> </div>

    The catch is when I hard code document.getElementById('space0').innerHTML it works fine. So is it something to do with the eval to make the div name? Like I said very new at JS.

    Thanks

  2. #2
    SitePoint Addict xDev's Avatar
    Join Date
    Jul 2003
    Location
    Moncton, New Brunswick, Canada
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I'd say your problem is the eval. There's no reason why you should be using eval to concatenate a string and number.

    var space = "space" + ansnum; will suffice.

    There is a better solution, though, to the way you are going about your script. Why not put all the relevant answers in the html itself and just hide it, through css, until they click the anchor. This way you can have all the content in an easy to index format, and have it searchable by a crawler. If you put the questions and answers in a defintion list, it will also increase the page's semantic relevance in the eyes of the search bots.

    The way you are going about it, you will have to put all your answers in a javascript array ... not a very attractive solution.

    Anyway, here's an example of what I'm talking about.

    Code:
    <html>
    <head>
    <style type="text/css">
    dl {
      font: 80% verdana, sans-serif; 
    }
    
    dt {
      font-weight: bold;
    }
    
    dd {
      display: none;
    }
    
    .on {
      display: block;
    }
    
    .off {
      display: none;
    }
    </style>
    <script type="text/javascript">
    
    function display(obj)
    {
      var el = document.getElementById(obj);
      if(el.className == '' || el.className == 'off')
        el.className = 'on';
      else el.className = 'off';
    }
    
    </script>
    </head>
    
    <body>
    
    <dl>
    <dt><a href="#ans1" onclick="display('a1'); return false;">This is question number 1?</a></dt>
    <a name="ans1"></a>
    <dd id="a1">And the answer is... And the answer is... And the answer is... 
    And the answer is... And the answer is... And the answer is... 
    And the answer is... And the answer is... And the answer is... </dd>
    </dl>
    
    <dl>
    <dt><a href="#ans2" onclick="display('a2'); return false;">This is question number 2?</a></dt>
    <a name="ans2"></a>
    <dd id="a2">And the answer is... And the answer is... And the answer is... 
    And the answer is... And the answer is... And the answer is... 
    And the answer is... And the answer is... And the answer is... </dd>
    </dl>
    
    <dl>
    <dt><a href="#ans3" onclick="display('a3'); return false;">This is question number 3?</a></dt>
    <a name="ans3"></a>
    <dd id="a3">And the answer is... And the answer is... And the answer is... 
    And the answer is... And the answer is... And the answer is... 
    And the answer is... And the answer is... And the answer is... </dd>
    </dl>
    
    </body>
    </html>
    This solution doesn't take into account if the user has ns4 or ie4, but you can put the relevant code to detect them if you wish. The amount of users still using these browsers isn't worth it imo. When you think about it, your already blocking 14% of the surfing public, the percentage of people that have javascript disabled, from even being able to use your page at all. Why even bother detecting if the other 1% are using antiquated browsers?

    -xDev

  3. #3
    SitePoint Member
    Join Date
    Jul 2003
    Location
    USA
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was having trouble accessing CSS properties with JS before but it was probably the same problem, I didn't know what eval really did. I'll try that way again thanks so much.

    edit: works fine..but was there something wrong with just doing <a href="javascript:display('a1')">? Works in all browsers I think, and seems simpler.


    By the way, if this is so easy what is wrong with simply having all your different pages of content in one long list on one html page and hiding and displaying them to change content instantly?
    Last edited by ben8765; Jul 29, 2003 at 09:48.


Bookmarks

Posting Permissions

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