Choose your own adventure

Question

Hey guys! I'm trying to build a 'Choose your own adventure' app using javascript, html, and just a little css. I have been able to create the first question, but once they make their decision, I don't know how to make that first bit of the story disappear and then queue in the next part of story text. Is there a bit of js code that makes text disappear once a button is clicked, and is replaced with whole new code? Does this make sense?

Thanks!

Answer 1 · 2017-07-25T20:27:02Z

July 25, 2017 8:27pm

Sure, and there's a number of ways to do this, but here's one simple one. Enclose each bit in a container element, like a <div>, and give it a unique ID name. Then, in your CSS set the "display" property to "none" on all the ones that should not be visible to start with. For example, if five containers had ID names of "q1" to "q5", you might have this in your CSS:

#q2, #q3, #q4, #q5 { display: none; }

Then, in the button click handler, you might have this code to make q1 vanish and q2 appear:

    document.getElementById("q1").style.display = "none";
    document.getElementById("q2").style.display = "block";

If you continue with the JavaScript courses here, you will learn this and other was of performing dynamic presentation changes on your page.

Answer 2 · 2017-07-25T20:49:53Z

July 25, 2017 8:49pm

You can do this by adding a style to the part of the story that you want to disappear. The CSS is simple. Just create a class with display: none;. Then you want to add an addEventListener to the button and put the callback function that will apply the CSS class to that part of the story. Below is a very simple example.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- CSS -->
    <style>
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <p id="hideThis">Make this disappear!</p>       <!-- What to hide -->
    <button id="btn1">Click Me!</button>            <!-- Button to trigger hide -->

    <!-- Javascript -->
    <script type="text/javascript">
        const p = document.getElementById('hideThis');
        const btn = document.getElementById('btn1');

        <!-- Add hidden css style to hideThis ID -->
        function hideClass() {
            hideThis.className = 'hidden'; 
        }

        btn.addEventListener('click', hideClass);   <!-- Execute hideClass on click -->
    </script>
</body>
</html>

Welcome to the Treehouse Community

Looking to learn something new?

Derek Miller

Derek Miller

Choose your own adventure

2 Answers

Steven Parker

Steven Parker

Kyle Johnson

Kyle Johnson