Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Matthew Younce
Matthew Younce
556 Points

Hiding and showing div based on answer to question prompt

I want to hide all of the content on a webpage, and show it after someone inputs the correct answer into a question prompt. And maybe close the page if they get it wrong. Please help me, I've tried everything.

2 Answers

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

What's "everything"?

It would help if you show the code you're working with. Is the functionality implemented in JavaScript? These are all reasonably simple things to do in JavaScript.

For example, when the correct answer is given, the items currently hidden using the display property of "none" could then be revealed by removing that property.

If you'd like more specific help, show your code.

Matthew Younce
Matthew Younce
556 Points

I'm working with HTML. I just want to hide the entire "body" section, which is nothing but text. But I know very little about HTML and nothing about JavaScript, so I don't know what commands to use, or how to use them. And I have no idea how to implement the thing you suggested. I'm basically useless. Help.

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

You're going to need a bit more than just HTML to do this. Dynamic responses will require CSS or JavaScript, or both. Luckily, there are courses here that will teach you how to do all those things.

You'll probably also need to modify your strategy a bit. For example: if you hide the entire <body>, how would the user see the question?

Matthew Younce
Matthew Younce
556 Points

Well, I was planning on using the "prompt() method". I can put everything that I want to hide (which is, at the moment, everything that is currently in the <body>) in a "div" and just hide the div.

(A bunch of needless explanation): Until now, I've tried looking up methods for how to do what I want to do, but all I found was separate explanations for how to hide things, and for how to use prompt() method. I literally tried jamming them together, and since computers just don't work like that, it didn't work at all. I did find something that was supposed to to something similar to what I want, but it had a literal password bar that appeared on the page. I would've settled for that, but it didn't work. At first it didn't hide anything, and then I realized that I was missing the entire CSS. After I put it in, the body was hidden, and I had the password bar, but nothing happened when I put in the password. So basically, I got rid of it, and I no longer have any code (working or otherwise) to show.

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

It would have been fine to show the code you made "jamming them together", and someone could help you fix it. Also, it doesn't look like you've started any of the courses that would help you learn JavaScript or general web page development yet. And I would caution you that attempting to build programs just by pasting together bits from examples without understanding the basic concepts behind them is likely to be as much or even more frustrating that what you've already experienced. But in the hopes that it might inspire you to get started with your learning, here's a simple example of what you described:

test.html 
<body id="hidden" style="display:none;">
  <p>Some page content.</p>
  <script type="text/javascript">
    var answer = prompt("What color is the White House?");
    if (answer.toLowerCase() == "white") {
      hidden.style.display = "block";
    }
  </script>
</body>
Matthew Younce
Matthew Younce
556 Points
Matthew Younce
Matthew Younce
556 Points

Thank you so much. That's exactly what I needed. I'm going to to all of the JavaScript stuff soon, but I'm still doing some other stuff first and I haven't gotten to it yet. I just wanted to add this one thing without having to do several hours of lessons first. Although, I realized that I could probably do more with this if I was hiding and showing divs. Would this work with a div? (I'm probably gonna go try it anyway without waiting for an answer. I'm dumb like that.) But again, thank you so much.

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

Experimentation is a useful learning tool. :wink: But yes, this concept will work with any kind of element. The <script> would still go at the end of the body in any case., and the page may still be blank until after the question is answered.

Matthew Younce
Matthew Younce
556 Points

Good. I wanted it to stay blank until after you answer the question. But the weird thing was it only seemed to work when I put the script in the div that I hid. But thanks. Also I have another question. can I make it display a separate div if the answer is incorrect? I want to display a troll message if the answer is wrong. I know I need to add an "else", but I don't know what after it.

Matthew Younce
Matthew Younce
556 Points

Wait, nevermind, it works when I put it outside the div. It was just loading weird.

Matthew Younce
Matthew Younce
556 Points

Wait, I figured it out. Now when you get it wrong, it explains the FitessGram™ Pacer Test. Thanks for your help, though. I couldn't have done this at all without you. Or at least I would've had to actually learn JavaScript first. Which I'm going to do, I just have other things to do first before I get to that.