How to show players input in gamebook

Viewed 314

So, I am trying to make a Gamebook that takes the players input in a form and then, when clicked, shows the text. Depending on what the player has answered, the game will reply, and so on. It has the idea of this game: https://jsfiddle.net/MacroG0D/9g1130pm/

So, below you can see that I do understand how to add text, using click and append. I just can't figure out how MacroG0D (in the fiddle) applied it to his game. Because I can't get it to work.

I also want to have the players-name shown as well and have this interaction. Since I can't seem to get it to work, it feels like it would be stupid to write the whole game first since I can't test it if this doesn't work.

Can someone maybe explain how it was done in the jsfiddle or have some tips?

    $(document).ready(function() {
      $("#button").click(function() {
        var toAdd = $("input[name=checkListItem]").val();
        $(".list").append('<div class="item">' + toAdd + '</div>');
      });
    });
    h2 {
      font-family: arial;
    }

    form {
      display: inline-block;
    }

    #button {
      display: inline-block;
      height: 20px;
      width: 70px;
      background-color: #cc0000;
      font-family: arial;
      font-weight: bold;
      color: #ffffff;
      border-radius: 5px;
      text-align: center;
      margin-top: 2px;
    }

    .list {
      font-family: garamond;
      color: #cc0000;
    }
    <!DOCTYPE html>
    <html>
    <head>
      <title>Gamebook</title>
      <link rel="stylesheet" type="text/css" href="CODEC.css" />
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script type="text/javascript" src="CODEC.js"></script>
    </head>
    <body>
      <h2>The Dutch Golden Age</h2>
<p>Contains an introduction story </p>
<p>Are you ready to play the game?</p>
      <form name="checkListForm">
        <input type="text" name="checkListItem" />
      </form>
      <div id="button">Answer</div>
      <br/>
      <div class="list"></div>
    </body>
    </html>    
0 Answers
Related