IDs not changing

Question

I'm trying to create multiple sections and show or hide them on click. So I have three id's: section2, section2hidden, and section2visible.

Please take a look at the non-working code at this website. Click on the language arts link under 6th grade and then hit the back button in the top left corner (not on your browser!). You will see that it brings the element back, but it is still opacity:0 or something.

Links come and go. Please provide a reproducible code example. — Brad, Dec 09 '12 at 05:10
ids identify elements. classes style them. You should not be changing ids at all. — Dennis, Dec 09 '12 at 05:16
@Dennis not everybody drinks the same CSS Kool Aid. Componentized CSS is a smart idea provided you don't over-granularize it but it doesn't render IDs useless or destructive for reducing bloat, which is the real enemy, not specificity which should be used as appropriate to keep things more, not less concise. — Erik Reppen, Dec 09 '12 at 05:50

score 2 · Answer 1 · answered Dec 09 '12 at 05:15

2

Your code seems to be stalling while looking for a div that doesn't exist.

document.getElementById('6-2')

causes an error of cannot read property 'style' of null.

answered Dec 09 '12 at 05:15

qooplmao

17,622
2
44
69

score 1 · Accepted Answer · answered Dec 09 '12 at 05:23

1

First of all, when you develop javascript code, you need to have a method to debug. If you are using Firefox, there's an addon called Firebug. If you are using Chrome, it's already integrated. Using that, you would see your "back" function fails to execute completely, because there is no element with "6-2" id, and you are trying to access properties of a null object. That answers "why it's failing" question. I'd recommend though to look up on these things:

Basic function concepts. You can have one function with parameters, instead of building "one(), two(), three()" etc functions.
Basic loop programming. You are using code like
```
.getElementById('6-1')...
.getElementById('6-2')...
```
Use loops to let the machine work for you, don't just copy/paste blindly.
CSS classes. Instead of changing the id of the element, just add a class to it, eg "hidden". Then add a rule like
```
.hidden{display:none;}
```
When you take away the class, the element will reappear because the rule will no longer apply.

answered Dec 09 '12 at 05:23

pkExec

1,752
1
20
39

thanks, but I am a beginner to javascript, and I don't know how to use parameters or loops – Thomas Lai Dec 09 '12 at 06:03
also, I added the rest of the sections (6-2, 6-3, etc...), but it still doesn't work. – Thomas Lai Dec 09 '12 at 06:07
and how do I add or remove a class to the element? – Thomas Lai Dec 09 '12 at 06:10
Add opacity: 1; to your #section2visible css rule. About your add/remove class, check this question: http://stackoverflow.com/questions/195951/change-an-elements-css-class-with-javascript – pkExec Dec 09 '12 at 06:50

score 0 · Answer 3 · answered Dec 09 '12 at 05:13

0

When you press the back button, the initial section remains with the ID section2hidden. It should be changed back to section2.

answered Dec 09 '12 at 05:13

rdiazv

1,153
7
7

I can't because it will play the animation again – Thomas Lai Dec 09 '12 at 06:04

IDs not changing

3 Answers3