Button click handlers for a JavaScript text-based adventure game I'm pretty new to JavaScript, and I'm trying to created a text-based game. I've written a few scenarios and based on the player's decision I have different scenarios written out. As of now I have the code written and it works but I feel like I can be more efficient with an if else statement in my js.

Here's what I have so far in terms of player decisions.



 $(document).ready(function(){
        
        $(".sit_1, .sit_2, .sit_3a, .sit_3b, .sit_4a").hide();
        $(".choice_1, .choice_2a, .choice_2b, .choice_3a, .choice_3b, .choice_4a, .choice_4b").hide();
        $(".sit_1").fadeIn(2000);
        $(".choice_1").fadeIn(4000);
        
        
        $(".choice_1").click(function(){
         $(".sit_1").hide();
         $(".choice_1").hide();
         $(".sit_2").fadeIn(4000);
         $(".choice_2a").fadeIn(8000);
         $(".choice_2b").fadeIn(8000);
        
        
         });
        
        
        $(".choice_2a").click(function(){
         $(".sit_2").hide();
         $(".choice_2a").hide();
         $(".choice_2b").hide();
         $(".sit_3a").fadeIn(4000);
         
        
        
        
         });
        
        
        $(".choice_2b").click(function(){
         $(".sit_2").hide();
         $(".choice_2a").hide();
         $(".choice_2b").hide();
         $(".sit_3b").fadeIn(4000);
         $(".choice_3a").fadeIn(4000);
         $(".choice_3b").fadeIn(4000);
        
        
        
         });
        
        
        $(".choice_3a").click(function(){
         $(".sit_3b").hide();
         $(".choice_3a").hide();
         $(".choice_3b").hide();
         $(".sit_4a").fadeIn(3000);
         $(".choice_4a").fadeIn(4000);
         $(".choice_4b").fadeIn(4000);
        
        
        
         });
        
        
        });
    &lt;html&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;div id="S1"&gt;
    
        &lt;div class="sit_1"&gt;
         You are lost in the woods.
        &lt;/div&gt;
      
        &lt;div class="sit_2"&gt;
         You find a cave. Do you go inside or go look for food? &lt;!-- choices are choice_2a and choice_2b --&gt;
        &lt;/div&gt;
      
        &lt;div class="sit_3a"&gt;
         You walk into the cave.&lt;!--no more choices for this one --&gt;
        &lt;/div&gt;
      
        &lt;div class="sit_3b"&gt;
         You walk away from the cave, to search for food. You find berries. Do you eat them or not? 
        &lt;/div&gt; &lt;!-- choice_3a and choice_3b --&gt;

                    &lt;div class="sit_4a"&gt;
         You eat the berries.
    &lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div id="a1"&gt;

     &lt;input type="button" class="choice_1" value="Continue on..."&gt;

     &lt;input type="button" class="choice_2a"value="Go inside"&gt;

     &lt;input type="button" class="choice_2b" value="Look for food"&gt;

     &lt;input type="button" class="choice_3a" value="Eat the berries"&gt;

     &lt;input type="button" class="choice_3b" value="Don't eat the berries"&gt;

   &lt;/div&gt;


       
        &lt;/html&gt;




Not sure how clear this is but I basically want all my situations (sit_) to be hidden along with the player choices (choice_) until the player presses a button or makes a choice and then the old situations along with the old choices will disappear to make way for the new situations and choices. 

As I said this code does work but I feel like I can make it more efficient with an if/else statement but I'm not sure how to go about it. Any help would be greatly appreciated.

Also, should I make the choices into an array to make it easier?
You are falling into a conceptual trap of trying to define javascript behaviors for each element on the page by numbering each and every one with a different id or class name (i.e. choice_*).  Any time you see this pattern in your coding, this should be a red flag that there is probably a better approach to your problem (which is why I think you are asking for this review).

With jQuery (or really javascript in general), you should be thinking in terms of what the behavior of an element is supposed to be using classes to identify elements which need to exhibit similar behavior, much in the same way you use classes to define elements that have common CSS stylings.  For example, all of your choice buttons fundamentally have the same behavior.  That is, they hide other options and expose a new situation.  Because this basic behavior is common, there is no reason that you need to duplicate code for each of these buttons.

So the question then becomes how do you generalize your code to have a single onclick handler for all of the choice buttons?

To do this, you have to have an understanding of which buttons expose which situations - something you are now implementing via choice_* class naming.

In jQuery/javascript, there are probably two main strategies to do this. One is to tie the elements together via their hierarchy in the DOM and to traverse the DOM hierarchy to hide/show related elements based on their location relative to each other on the DOM.  For example, when hiding/showing elements, you might hide all the siblings in same level of DOM as the one you are trying to show.

The other main approach is to use data attributes to describe how elements should interact with one another.

I will focus on the data attribute approach here as I think this makes the most sense for your use case.  You have a potentially complex set of interactions in a "Choose Your Own Adventure" style of game where you ultimately may have multiple story branches each which could lead to different situations via different paths.  This would likely be hard to model via HTML hierarchy alone once you move beyond just a trivial proof of concept.  Data attributes are also a powerful tool for a budding javascript developer to learn.

I would propose some changes to your HTML to make each "situation" its own self-contained set of HTML elements, like the concept of a page.  You could then hide/show each situation (including choices) as a single entity.  I also think in this case it makes your HTML much easier to read and maintain.

&lt;html&gt;
    &lt;div class="situation default_situation" data-situation="start"&gt;
        &lt;div class="situation_text"&gt;
            You are lost in the woods.
        &lt;/div&gt;
        &lt;input type="button" class="situation_choice"
            value="Continue on..."
            data-situation-target="found_cave"&gt;
    &lt;/div&gt;
    &lt;div class="situation" data-situation="found_cave"&gt;
        &lt;div class="situation_text"&gt;
            You find a cave. Do you go inside or go look for food? 
        &lt;/div&gt;
        &lt;input type="button" class="situation_choice"
            value="Go inside"
            data-situation-target="enter_cave"&gt;
        &lt;input type="button" class="situation_choice"
            value="Look for food"
            data-situation-target="food_search"&gt;
    &lt;/div&gt;
    &lt;div class="situation" data-situation="enter_cave"&gt;
        &lt;div class="situation_text"&gt;
            You walk into the cave.
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="situation" data-situation="food_search"&gt;
        &lt;div class="situation_text"&gt;
            You walk away from the cave, to search for food. You find berries. Do you eat them or not? 
        &lt;/div&gt;
        &lt;input type="button" class="situation_choice"
            value="Eat the berries"
            data-situation-target="eat_berries"&gt;
        &lt;input type="button" class="situation_choice"
            value="Don't eat the berries"
            data-situation-target="ignore_berries"&gt;
    &lt;/div&gt;
    &lt;div class="situation" data-situation="eat_berries"&gt;
        &lt;div class="situation_text"&gt;
            You eat the berries.
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="situation" data-situation="ignore_berries"&gt;
        &lt;div class="situation_text"&gt;
            You ignore the berries. You are still hungry.
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/html&gt;


Note that we apply a data attribute called situation on the container of each situation "page" to uniquely identify it amongst all situations.  We also have data attributes on each option specifying the situation-target that option relates to (i.e. which situation will be shown when the button is clicked).

I have added another class situation_default to show which situation(s) are visible for display on initial page load.

Finally, I have also introduced a class for situation_text here that is not used in the javascript at all, but could perhaps give you a handle for applying CSS styling.

You use these data attributes within your javascipt to implement the logic as to what situation is shown when an option is clicked.

$(document).ready(function() {
    // Create jQuery handle to all situations.
    // Having this outside click handler allows you to access it while
    // preventing you from having to query the DOM every time you want to
    // act on this selection of elements as a whole.
    var $allSituations = $('.situation');

    // Get selector for default situation(s) which will show on page load
    var $defaultSituation = $('.default_situation');

    // Show default situation(s)
    $allSituations.hide();
    $defaultSituation.fadeIn(2000);

    $('.situation_choice').on('click', function() {
        // Find target situation element for this choice.
        // We use the 'situation-target' data attribute for the
        // clicked element, this, within the handler to determine
        // the target.
        var targetName = $(this).data('situation-target');
        var $target = $('.situation[data-situation="' + targetName + '"]')

        // if we find a single target element, we can now show it
        if($target.length === 1) {
            // hide all situations
            $allSituations.hide();
            // show target element
            $target.fadeIn(4000);
        }
    });
});