Only showing a div with a certain id by manipulating CSS file and my Javascript file

Question

I'm new to Javascript DOM so I need a little bit of help walking through the basics before I can get going - I have an HTML file like this:

<div id="content">
    <h1>FOREST SIMULATOR</h1>
    <div id="intro">
        starting forest (leave empty to randomize):
        <br />
        <textarea id="inputForest" name="inputForest" cols="16" rows="8"></textarea>
        <br />
        <button>generate</button>
    </div>
    <div id="sim" class="hidden"></div>
    <div id="pushtray" class="overlay"></div>
</div>

I want to only show the content in the div with id="intro", making sure that the .overlay and #sim div are not displayed. I would need to make appropriate CSS rules and use Javascript's element.add, remove, and contains so I can control which CSS rules are active.
I'm not entirely sure what this means and how it would look like.

What am I doing in my CSS file exactly?

Possible duplicate of [Show/hide 'div' using JavaScript](https://stackoverflow.com/questions/21070101/show-hide-div-using-javascript) — Estevan Maito, Nov 23 '18 at 20:12

score 1 · Answer 1 · answered Nov 23 '18 at 20:17

1

If you don't want to display the div elements with id "overlay" and "sim" you can write it as:

document.getElementById("sim").style.display="none";
document.getElementById("pushtray").style.display="none";

answered Nov 23 '18 at 20:17

Marko Panushkovski

63
1
3

So this goes in my Javascript file correct? How would my js file know what "document" is referring to? I'm using express-static to serve the html file, is that how it knows? – Nov 24 '18 at 00:26
It should be correct. Your javascript file does not have to know in which document it is used. You can attach it to every html file where it does the work correctly. In other words you can attach it this way: and for every time your going to use the object document in your js file, it will always refer to the html file that it has been linked to – Marko Panushkovski Nov 24 '18 at 13:15
Do you know why I'm getting a referenceError for document? In my html, it's written in the header . Yet when I type in node sim.js, it's giving me a referenceError at the part where I'm referencing document. – Nov 24 '18 at 20:16
Your html file and your javascript file have to be in the same folder, if they are not you should put them together (as well as the css and html files are together). – Marko Panushkovski Nov 24 '18 at 22:07

score 0 · Answer 2 · answered Nov 23 '18 at 20:13

You should give the class hidden to any element you dont want visible (you can have any number of classes on an element), and then add a css rule that hides them:

<style>
  .hidden{
    display:none;
  }
</style>

Then if you want to show these hidden element when some sort of action is taken, you use javascript to add and remove the hidden class respectively.

var element = document.getElementById("sim");
element.classList.remove("hidden")

Bálint Cséfalvay · Answer 3 · 2018-11-23T21:32:58.217

This code hides the 'overlay' and 'pushtray' elements:

                   document.getElementById('overlay').style.display = 'none';
                  document.getElementById('pushtray').style.display =  'none' ;

This code hides only the content of the 'overlay' and 'pushtray' elements, but the elements are still "reserve" place in your page.

               document.getElementById('overlay').style.visibility = 'hidden';
              document.getElementById('pushtray').style.visibility= 'hidden' ;

Mark Baijens · Accepted Answer · 2018-11-23T22:41:28.473

The following css hides all div elements in the content div. After that it will show the intro div.

Bound a click function to the "generate" button with Javascript to hide the intro div and show the sim div.

With some alterations you should be able to make it work to your liking.

//Wait for the dom to finish loading
document.addEventListener("DOMContentLoaded", function(){
  //then bind a click event handler to all the buttons inside the div with the id intro
  document.querySelector("div#intro button").addEventListener("click", function(){
    //hide the intro div and show the sim div when the button is clicked
    document.getElementById("intro").style.display = "none";
    document.getElementById("sim").style.display = "block";
  });
});

div#content div {
  display: none;
}

div#content div#intro {
  display: block;
}

<div id="content">
    <h1>FOREST SIMULATOR</h1>
    <div id="intro">
        starting forest (leave empty to randomize):
        <br />
        <textarea id="inputForest" name="inputForest" cols="16" rows="8"></textarea>
        <br />
        <button>generate</button>
    </div>
    <div id="sim" class="hidden">lalala</div>
    <div id="pushtray" class="overlay">lalala</div>
</div>

Only showing a div with a certain id by manipulating CSS file and my Javascript file

4 Answers4