HTMLHelp Forums > Help making my page XHTML Strict (ID issue)

Full Version: Help making my page XHTML Strict (ID issue)

HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)

colinwright

Feb 11 2009, 11:59 PM

I've put together a little project for a CS class I'm in, and cannot figure out how to make it Validate as XHTML Strict.

You can find the site here: http://colinismy.name/client/hw/experiment.html

It looks like the trouble is with the 'id's that are being used, and I know that with Strict, the first character has to be a letter, but when I swap out the digits for an id with letters and numbers (for example, s1, s2, s3, etc), the Javascript function ceases to work.

Any ideas what I'm doing wrong?

Thanks in advance!

pandy

Feb 12 2009, 12:21 AM

What errors don't you understand? The validator's explanations are pretty straightforward in this case. An ID can't start with a number (that's always the case) and attribute values must be quoted in XHTML.

http://www.htmlhelp.com/cgi-bin/validate.c...s&input=yes
http://www.w3.org/TR/html401/types.html#type-name
http://www.w3.org/TR/xhtml1/#diffs

Just curious, what's CS? DreamWeaver?

Darin McGrew

Feb 12 2009, 12:36 AM

Also, if the JavaScript is trying to access an element with id="1" and you change the HTML to id="s1" then you need to update the JavaScript to match.

pandy

Feb 12 2009, 03:24 AM

He-he! I didn't notice there was anything to click. That's funny!

colinwright

Feb 12 2009, 04:32 AM

Hmmm, well, I knew about what the Validator was telling me, but what I can't figure out is how to make it work and still Validate.

I've uploaded a new version so you can see what I'm talking about:

http://colinismy.name/client/hw/experiment.html

I went through and added quotation marks and a letter to the beginning of each and every 'id' (and where they are referenced by the Javascript), and for the first handful I tried different things with the Javascript in case I was referring to the id's incorrectly. No dice on any of them...it simply doesn't work.

Any ideas? Thanks for the input you've given already, but I definitely need to figure this out by tomorrow, so any additional help would be very much appreciated!

Thanks!

pandy

Feb 12 2009, 04:50 AM

Still far from validates.
http://www.htmlhelp.com/cgi-bin/validate.c...s&input=yes

The JS problem probably is in the below lines.

CODE

var ThisAnswer = document.getElementById(divid);
var LastAnswer = document.getElementById(divid - 1);

You can't subtract 1 from something that isn't a number.

Christian J

Feb 12 2009, 05:38 AM

If you just want to ignore the first character in the ID when doing the subtraction, you might use something like

CODE

var LastAnswer = document.getElementById('s'+1*(divid.substring(1)-1));

colinwright

Feb 12 2009, 12:34 PM

Hey all!

So I went through and made sure everything validates...now the only issue is that it still doesn't work

I tried what you suggested, Christian J, but it didn't seem to help (though I may be doing it wrong...I'm still quite new to writing Javascript, as I'm sure you can tell). I'm really just not sure what to do at this point. I'm sure you're right, pandy, that it's those two variable-defining lines that are the issue, but I cannot for the life of me think of how to keep the little trick with the reveal working with the valid code.

Any more ideas?

Thanks thanks thanks!

Christian J

Feb 12 2009, 02:33 PM

This line is missing a closing parenthese:

CODE

var LastAnswer = document.getElementById('s'+1*(divid.substring(1) - 1);

Even though it may work, this seems unnecessary (or is it some bug fix?):

CODE

if (document.all) {
    ThisAnswer.style.display = 'inline';
    LastAnswer.style.display = 'none';
} else {
    ThisAnswer.style.display = '';
    LastAnswer.style.display = 'none';

}

so you may want to consider replacing it with this:

CODE

ThisAnswer.style.display = 'inline';
LastAnswer.style.display = 'none';

There's no value "yes" for "display", probably you want "inline":

CODE

ThisAnswer.style.display = 'yes';

(same thing shows up in many inline styles).

Here you should use just 's2', and in single quotes:

CODE

doSection(id=s2)

like this: doSection('s2'). All the other calls to the function doSection need their parameters single-quoted as well.

There might be more errors but this should suffice for the moment.

pandy

Feb 12 2009, 03:09 PM

QUOTE(Christian J @ Feb 12 2009, 11:38 AM)

CODE

var LastAnswer = document.getElementById('s'+1*(divid.substring(1)-1));

Isn't it easier (to understand and less error prone) like this?

CODE

var ThisAnswer = document.getElementById(divid).id;
alert(ThisAnswer);
var LastAnswer = ThisAnswer.substring(1) -1;
alert(LastAnswer);

While this is really enough. No need to "get" the id, i.e. the object.

CODE

var LastAnswer = divid.substring(1) - 1;
alert(LastAnswer);

Christian J

Feb 12 2009, 03:35 PM

QUOTE(pandy @ Feb 12 2009, 09:09 PM)

Isn't it easer (to understand and less error prone) like this?

I just made it as brief as possible so the OP could copy & paste.

Anyway, this looks like a convoluted way of getting the value of the function argument "divid":

QUOTE

CODE

var ThisAnswer = document.getElementById(divid).id;

Also, this is lacking the "s":

CODE

var LastAnswer = ThisAnswer.substring(1) -1;

...and if you prepend the "s" I recall you must also do the multiplication with 1 to make javascript realize the other part is a number.

QUOTE

While this is really enough.

CODE

var LastAnswer = divid.substring(1) -1;
alert(LastAnswer);

No, (besides the "s" problem) the variable LastAnswer is meant to hold the element with an ID (so you can show/hide that element), not the value of the ID.

Christian J

Feb 12 2009, 04:44 PM

QUOTE(pandy @ Feb 12 2009, 06:21 AM)

An ID can't start with a number

Does anyone know why W3C decided not to allow that?

pandy

Feb 12 2009, 07:17 PM

QUOTE

Anyway, this looks like a convoluted way of getting the value of the function argument "divid":

QUOTE

CODE

var ThisAnswer = document.getElementById(divid).id;

How else would you get it? document.getElementById(divid) returns the object, not the id name.

QUOTE

Also, this is lacking the "s":

CODE

var LastAnswer = ThisAnswer.substring(1) -1;

...and if you prepend the "s" I recall you must also do the multiplication with 1 to make javascript realize the other part is a number.

But that's what you want, the id with the s prefix shaved off. How else to subtract 1 from it?

QUOTE

While this is really enough.

CODE

var LastAnswer = divid.substring(1) -1;
alert(LastAnswer);

No, (besides the "s" problem) the variable LastAnswer is meant to hold the element with an ID (so you can show/hide that element), not the value of the ID.

The substraction still must be done without the s. Easy enough to put back.

CODE

var LastAnswer = 's' + (divid.substring(1) - 1);
alert(LastAnswer);

pandy

Feb 12 2009, 07:36 PM

QUOTE(Christian J @ Feb 12 2009, 10:44 PM)

QUOTE(pandy @ Feb 12 2009, 06:21 AM)

An ID can't start with a number

Does anyone know why W3C decided not to allow that?

Who am I to question their infinite wisdome?

But! I have on occation seen IE, of all browsers, refuse to work with anchors that don't begin on a number.

colinwright

Feb 12 2009, 07:58 PM

Wow, thanks a lot Christian J and pandy!

I went ahead and used Christian's method, and it work fabulously in Firefox, and works in IE, but looks a little wonky (big spaces between the different <p>'s).

I'm going to tool around with it and see if I can't make it look the same in both, and if anyone has any ideas on that, I'd love to hear them. But either way, you got me over the big hurdle, and I really, really appreciate it!

Have a fantastic weekend!

Christian J

Feb 13 2009, 06:55 AM

QUOTE(pandy @ Feb 13 2009, 01:17 AM)

QUOTE

Anyway, this looks like a convoluted way of getting the value of the function argument "divid":

QUOTE

CODE

var ThisAnswer = document.getElementById(divid).id;

How else would you get it? document.getElementById(divid) returns the object, not the id name.

The function argument "divid" already has the value:

CODE

alert(divid);

QUOTE

Also, this is lacking the "s":

CODE

var LastAnswer = ThisAnswer.substring(1) -1;

...and if you prepend the "s" I recall you must also do the multiplication with 1 to make javascript realize the other part is a number.

But that's what you want, the id with the s prefix shaved off.

I was assuming that the "s" was included in the function call parameter:

CODE

<a href="java script:doSection('s2')">Ghosts</a>

then you must of course remove it before the subtraction. After the subtraction you can prepend the "s" again. Finally, since I did all of this on one line I used the multiplication to tell the JS engine that part was a number (and not a string), though it seems just a parenthese (like you did it) is enough:

CODE

var previousID = 's' + (divid.substring(1) - 1);

But of course you might simply use plain numbers in the function calls instead:

CODE

<a href="java script:doSection(2)">Ghosts</a>

(no single quotes are necessary with numbers) and prepend the "s" in the script after doing the subtraction. Afraid I didn't look at the page before posting my first reply.

QUOTE

While this is really enough.

CODE

var LastAnswer = divid.substring(1) -1;
alert(LastAnswer);

No, (besides the "s" problem) the variable LastAnswer is meant to hold the element with an ID (so you can show/hide that element), not the value of the ID.

The substraction still must be done without the s. Easy enough to put back.

That's what I did in my first reply: remove the first character (the "s"), subtract 1, and prepend an "s".

Christian J

Feb 13 2009, 07:09 AM

QUOTE(colinwright @ Feb 13 2009, 01:58 AM)

and works in IE, but looks a little wonky (big spaces between the different <p>'s).

Do you mean the horizontal spaces between the words? I think that's an IE bug due to the code formatting. If you remove all line breaks and spaces (except between the last "ghost" word and the next "are" word, etc) it might go away.

QUOTE

Have a fantastic weekend!

The same to you!

pandy

Feb 13 2009, 07:14 AM

QUOTE

How else would you get it? document.getElementById(divid) returns the object, not the id name.

The function argument "divid" already has the value:

Yes, that's what used. I assumed LastAnswer would return the object and it does if you check that directly after your line...

CODE

var LastAnswer = document.getElementById('s'+1*(divid.substring(1) - 1));
alert(LastAnswer);

Then when it's used in context it obviously contains the ID name (which I never checked before)

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.