DOM error stared at it for days help me!

**ben8765** · Jul 28, 2003 20:02

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

**xDev** · Jul 29, 2003 00:53

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

**ben8765** · Jul 29, 2003 09:09

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?

User Tag List

Thread: DOM error stared at it for days help me!

Thread Tools

Display

DOM error stared at it for days help me!

Bookmarks

Bookmarks

Posting Permissions