.getElementById('').getElementById('').style doesnt work

Question

Javascript

document.getElementById('menu').getElementById('line1').style.opacity = "0";

HTML

<a href = "#"><div id = "menu" onclick="menu()">
            <div id = "line1">1</div>
            <div id = "line2">1</div>
            <div id = "line3">1</div>
        </div></a>

So I am trying to make the first line disappear, but it doesn't run for some reason. Do i have something wrong with my syntax? The reason I have the additional .getElementById('menu') is because I have div id = "menuClose" to return back to the original. Unless there is another way?

`getElementById()` is a method on the `document` object only. Elements (`div`, etc.) don't have this method. — Paul Roub, Aug 05 '14 at 19:14

score 6 · Accepted Answer · edited May 23 '17 at 11:53

6

Why are you selecting menu first? You can select the line directly since it's identified by an id:

document.getElementById('line1').style.opacity = "0";

JsFiddle here.

If you want to change all the div contained in another div (in your case all the divs contained in the div with id="menu"), use document.getElementById('menu').childNodes and then iterate as shown on this SO post

edited May 23 '17 at 11:53

Community

1
1

answered Aug 05 '14 at 19:13

Ende Neu

15,581
5
57
68

I have another div called menuClose that looks exactly the same and it will hide all of these and show itself? Is there another way to do it? – skarchmit Aug 05 '14 at 19:16
1

@skarchmit use classes and `document.getElementsByClassName` for that – user428517 Aug 05 '14 at 19:17
You can select the parent and then use [childNodes](http://stackoverflow.com/questions/10381296/best-way-to-get-child-nodes), but at this point you have to question your markup since ids must be unique, i.e. there isn't another div with id line1. – Ende Neu Aug 05 '14 at 19:18
And make sure the elements within `menuClose` have different IDs than those in `menu`. IDs *must* be unique within the document. – Paul Roub Aug 05 '14 at 19:18
@EndeNeu document.getElementById('line1').style.WebkitTransform = "rotate(45deg) translate3d(10px,10px,0)"; document.getElementById('line2').style.WebkitTransform = "rotate(-45deg) translate3d(10,-10px,0)"; document.getElementById('line3').style.WebkitTransform = "rotate(45deg) translate3d(10,-10px,0)"; When I do this, it only affects the first one, but when its opacity it works fine. – skarchmit Aug 05 '14 at 19:34
As I said, if your div has an id and you use `getElementById` you select **only** that element, that means that whathever function you apply later will be applied only to that element you specifically selected. If you want to apply the changes to all the rows, select the div that contains all the div you want to change (in your case the div with id menu) and then iterate the element and apply the properties, [this SO answer](http://stackoverflow.com/questions/9780443/how-to-select-all-children-of-an-element-with-javascript-and-change-css-property) shows how to do it. – Ende Neu Aug 05 '14 at 19:38

score 4 · Answer 2 · answered Aug 05 '14 at 19:14

4

document.getElementById('line1').style.opacity = "0";

This is all you need to do. line1 is an id, so it can be retrieved using getElementById without having to access the parent element.

answered Aug 05 '14 at 19:14

Dismissile

32,564
38
174
263

score 1 · Answer 3 · answered Aug 05 '14 at 19:17

1

please try

document.getElementById('line1').style.display='none';

answered Aug 05 '14 at 19:17

user1685652

199
3
5
17

score 0 · Answer 4 · answered May 30 '15 at 09:31

0

This is very simple as you are selecting menu first, But you may try this method

document.getElementById('line1').style.display='none';

May this helps,

answered May 30 '15 at 09:31

.getElementById('').getElementById('').style doesnt work

4 Answers4