I'm trying to create a table, where the two cells are both hotspots. This is the code of the webpage so far...

relevant languages, html css js.


Code:


***PLEASE NOTE. The JS functions are not complete. They are intended to alter the background color of the cell clicked on (active should be white, other should be the cyan color). Then, they should remove some preexisting html and insert new.

Well, for starters I see only one function created but three are being called. Perhaps change the function called with onClick to a persistant name. Also, try adding the pound sign before the ID name in the function.

Yes. I only got to making one of the functions. There will be three. Unless there is a way to accomplish what i want to in one function.

You have a semicolon after function aboutMe().

I don't think you need the pound sign for document.getElementById(). I would make sure to throw this inside some extra markup, like:

Code:

Ninja Edit: It didn't need extra markup (That would help), you were referencing the style incorrectly. It should be using:
Code:
not
Code:
(Not that it uses an extra variable, just where you reference the style part).

Real edit: Or what Benryves said is probably more important

ComicIDIOT has you covered there; it's faster to explicitly set style.backgroundColor than just set style and let the style parser figure out which element of the style you're actually changing. And nice catch, benryves.

Ok, this is my new code, and it still seems to not do anything. It should create a clickable hotspot. There's no onclick at all. NOTE: I am aware that two of the scripts are not done.


Code:

Why are all your "getElementByID"'s under the same function?

Are you sure that it's not clickable? The cursor won't turn into a hand, but it should be clickable anyway. If you're using Firefox, press Ctrl-Shift-J to open the Error Console and see if any errors pop up. I don't see any problems off the top of my head, though.

Because the styles of 3 elements are being altered within the function.

You're trying to set background-color when you should be trying to set backgroundColor (the hyphen in the name looks like a subtraction sign to JavaScript, so when accessing style properties in JavaScript you need to use a variety of alternate names for properties).

Nice catch once again, BenRyves. I see that comicIDIOT's code had it right, so make sure you read carefully, ACagliano. Punctuation and casing is key! (Then again, I missed the difference too).

I feel like your browser would have been able to list some of these errors in its error console. And, indeed, nice catch

That's why I've been suggesting looking at the error console, or for some even more complex debugging help, using something like Firebug.

You can set background color with style sheets "background" as well.



So are you going to copy paste the code into the other functions? If the code is the same then why not make one function?

Well, the thing is, depending upon which element is clicked upon (and thus which function is called), I will be changing the styles differently. I'm not quite sure how to do that all in one routine. I will gladly modify it in such a fashion when I figure out how to do it, but for now... 3 functions


EDIT: You guys rock! It works now! http://ac.clrhome.org. Try clicking the tabs at the top of the text box.

Also, I'm curious as to whether the page displays properly in all browsers. My friend Mike reported that it doesn't in IE9 and I'm not sure why.

I just wanted to add a little note. It's better practice to call document.getElementById only once, and store the reference in a variable.
While you will probably not notice a difference on modern computers, it's still better

Ok, now one thing is escaping me... Here's my code on one thing..


Code:


Note the problem. I can't assign an attribute value to the a href attribute. It will close the string. Suggestions?

Your page lacks a doctype (pick one according to which variation of HTML/XHTML you are using - as you are closing <img /> and <br /> I'd go for XHTML 1.0 Strict). Without a doctype the browser can't tell for sure which particular set of standards you are intending to adhere to and falls back to "quirks mode" (which is browser-specific - IE uses a completely different box model, for example). If you look at the page in IE, press F12 and you'll see "Document Mode" is set to "Quirks" - change it to "IE9 standards" and it'll rearrange itself.

Once you've picked the doctype run the code through a validator to check it (and fix it as required).

For your strings, you can either use ' around the string (e.g. '<a href="#">Foo</a>') or escape the " (e.g. "<a href="#">Foo</a>").

Ok, I put in

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Now, the only object that moved is the navbar table. Everything else didn't move. But the validator is giving me 23 errors, most of which are tags that don't belong in certain spots or tags that are closed and not open when I know that there is nothing wrong with them.