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?

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?

• javascript
• html
• css

• 4 getElementById() is a method on the document object only. Elements (div, etc.) don't have this method. – Paul Roub Commented Aug 5, 2014 at 19:14

4 Answers 4

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

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.

please try

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

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,