Search code examples
javascripttextboxprompt

How to let prompt read text input & print out customised text messages?


I'm trying to do a text adventure game using basic JS. Basically, a user will have 2 options, and the prompt box should print out corresponding messages based on choices the user make.

I'm guessing that what missing is an event listener--but I'm not sure how to go about implementing that.

let message = prompt("Hi this is an adventure. Select your input as A or B. In front of you there is a sign. Pick  A. Forest B. Lake")

if (A) {
  prompt("you see the bushes ahead of you rustling.You-- A.proceed ahead  B.turn back and run")
};
else if (B) {
  prompt("you see the water bubbling. You--A. walk up B.--flee")
}


Solution

  • You need to compare if (message.toUpperCase() === "A") { to allow user to type a or A

    You will also have a lot less code if you use an object and a form

    const advent = {
      "Start": {
        "text": "Hi this is an adventure. Click the buttons to make your choice. In front of you there is a sign. You go direction",
        "a": "Forest",
        "b": "Lake"
      },
      "Forest": {
        "text": "you see the bushes ahead of you rustling. You --",
        "a": "proceed ahead",
        "b": "turn back and run"
    
      },
      "Lake": {
        "text": "you see the water bubbling. You--",
        "a": "walk up",
        "b": "flee"
      },
      "walk up": {
        "text": "You drown; The end"
      },
      "flee": {
        "text": "You fall in a hole and die; The end"
      }
    };
    
    let currentPath = advent["Start"]
    
    window.addEventListener("DOMContentLoaded", function() {
      const text = document.getElementById("text");
      const A = document.getElementById("a");
      const B = document.getElementById("b");
      const show = () => {
        text.innerHTML = currentPath.text; console.log(currentPath.a)
        if(currentPath.a) A.value = currentPath.a
        if(currentPath.b) B.value = currentPath.b
      };
    
      const form = document.getElementById("myForm").addEventListener("click", function(e) {
        const tgt = e.target;
        currentPath = advent[currentPath[tgt.id]]
        document.getElementById("choices").hidden = (!currentPath.a && !currentPath.b); // hide if no choices
        show()
      });
      show(); // start
    });
    <form id="myForm">
      <div id="text"></div>
      <div id="choices"><input type="button" id="a" value="A"> <input type="button" id="b" value="B"></div>
    </form>