I want to hide divA and show divB. If I click a button I want to hide divB and show divA. I don't want to use JQuery.

I have troubles hiding divA when the page loads. When I click the button, the divB is hidden correctly.

I added this in the beginning of the document

<script>
    var doNotShow= document.getElementById('divA');
    doNotShow.style.display = 'none';
</script>

The thing is, it does not work. The weird thing is that when later, I try to hide divB via a button click then divB hides as it should. The divA is after the javascript part in the file.

I want to hide divA and show divB. If I click a button I want to hide divB and show divA. I don't want to use JQuery.

I have troubles hiding divA when the page loads. When I click the button, the divB is hidden correctly.

I added this in the beginning of the document

<script>
    var doNotShow= document.getElementById('divA');
    doNotShow.style.display = 'none';
</script>

The thing is, it does not work. The weird thing is that when later, I try to hide divB via a button click then divB hides as it should. The divA is after the javascript part in the file.

• javascript
• html
• css

Share Improve this question Follow edited Aug 27, 2013 at 21:36 Kevin Ji 10.5k44 gold badges4343 silver badges6565 bronze badges asked Aug 27, 2013 at 20:24 KaruvägistajaKaruvägistaja 29322 gold badges88 silver badges1818 bronze badges 4

• 2 why not just set the css for divA to display:none – Pedro Estrada Commented Aug 27, 2013 at 20:27
• 1 "The divA is after the javascript part in the file." <-- this is the problem. Put the script tag after the HTML part and it will work – Niccolò Campolungo Commented Aug 27, 2013 at 20:27
• Make sure not to use JavaScript to initially hide your element, unless it shouldn't always be hidden when the page load. Simply use a CSS rule like I (and @PedroEstrada) suggested. It's far more elegant and efficient. – plalx Commented Aug 27, 2013 at 20:42
• Better yet, why not never use IDs for styling and only use classes? – Kevin Ji Commented Aug 27, 2013 at 21:35

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

I added this in the beginning of the document

You must execute document.getElementById after the element with the queried ID exists in the document, otherwise null will be returned.

You can move the script tag to the bottom of the page (or simply after those elements), or wrap it inside a window.onload handler.

---

It's good practice to have the <script> tags right before the closing </body> so all the elements are already present in the page and you don't need to worry about wrapping code in window.onload or DOM ready (DOMContentLoaded) handlers.

Javascripts are executed when they are read. If divA is defined after the script, there is nothing to execute the script on, which you will see if you use debugging tools like Firebug in Firefox or Developer Tools in Chrome (a TypeError will occur).

Your code is running before divA exists in the DOM. That's why it doesn't work.

To solve the issue with your current solution, put your script after the divA markup in the document.

However, you do not need to use JavaScript and probably shouldn't to initially hide your divA element. You can use the following CSS rule instead:

#divA { display: none; }