I want to add more options to my switch statements. Is there any way of achieving that?

Question

I have this code:

<input id = "input" type = "text" placeholder = "Type 'Help1' for actions"/> 
<button onclick="button()">Confirm</button>
<p id="message"></p>

<script>
function button() {
   var text;
   var textInput = input.value;
   switch (textInput) {
        case "Help1":
            text = "[Page 1 of 2. Type 'Help2' for page 2] Commands you can use: <ul><li>South</li><li>North</li><li>East</li><li>West</li><li>North Again</li><li>South again</li>";
            break;
        case "Help2":
            text = "[Page 2 of 2] Commands you can use: <li>North One More</li><li>East Once More</li><li>West Once More</li><li>South Once More</li><li>East Again</li><li>West Again</li>";
            break;
       case "South":
            text = "You went to the city; street 2. Do you want to explore?";
            break;
    }
}
</script>

Now say I wanted to add to my case for South. As you can see there's a question for it (and note: there are other cases after this one). I'd like to add something like a yes or no kind of thing and if I type in, "yes" it'll give me something like, "You had fun". And no giving me, "You decided not to explore South Street 2.

Is there anyway of doing something like this? I tried starting another case but that didn't work out. Neither do if and else if statements inside the case. Any feedback will be greatly appreciated.

can you show me how that would look please? – The.Epistemophile.Bibliophile Apr 07 '20 at 02:50 — The.Epistemophile.Bibliophile, Apr 07 '20 at 02:50

score 1 · Answer 1 · answered Apr 07 '20 at 02:53

It sounds like the text is being inserted into the DOM, and the user has to put in another input before the logic continues. This inputting of additional value(s) is asynchronous. The clearest way to express chained asynchronous code flow is with async/await: you can make a function which returns a Promise which resolves when the user presses the button. Whenever you want to implement logic for asking the user, call it and await the Promise.

switch is pretty ugly and verbose, consider using ordinary if/else statements.

Also consider lower-casing the input text, it'll make things a bit easier for the user.

It would also be good to avoid inline handlers, they have too many problems. Attach the listener using Javascript instead.

const button = document.querySelector('button');
const input = document.querySelector('input');
const nextInput = () => new Promise((resolve) => {
  button.onclick = () => {
    resolve(input.value.toLowerCase());
  };
});

const summary = document.querySelector('div');
const display = text => summary.innerHTML = text;
const main = async () => {
  const textInput = await nextInput();
  if (textInput === 'help1') {
    display("[Page 1 of 2. Type 'Help2' for page 2] Commands you can use: <ul><li>South</li><li>North</li><li>East</li><li>West</li><li>North Again</li><li>South again</li>");
  } else if (textInput === 'help2') {
    display("[Page 2 of 2] Commands you can use: <li>North One More</li><li>East Once More</li><li>West Once More</li><li>South Once More</li><li>East Again</li><li>West Again</li>");
  } else if (textInput === 'south') {
    display("You went to the city; street 2. Do you want to explore?");
    const exploring = await nextInput();
    if (exploring === 'yes') {
      display('Exploring');
    } else {
      display('Not exploring');
    }
  }
  // go back to beginning state
  main();
};

main();

<input type="text" placeholder="Type 'Help1' for actions">
<button>Confirm</button>
<div></div>

While I have used if and else if statements and while this does work, if I continue using if and else if statements, the code gets too messy and confusing. I've had other people tell me to consider using switch statements since it cleans the code up well. — The.Epistemophile.Bibliophile, Apr 07 '20 at 17:50
But thanks for the information you've provided! It seems really beneficial! — The.Epistemophile.Bibliophile, Apr 07 '20 at 17:51

score 0 · Answer 2 · answered Apr 07 '20 at 02:55

You can nest another switch...case. You just have to be sure you are assigning a value to the answer, or using something like window.prompt which will get an answer.

for example:

switch (textInput) {
  case "Help1":
    text = "[Page 1 of 2. Type 'Help2' for page 2] Commands you can use: <ul><li>South</li><li>North</li><li>East</li><li>West</li><li>North Again</li><li>South again</li>""
    break;
  case "Help2":
    text = "[Page 2 of 2] Commands you can use: <li>North One More</li><li>East Once More</li><li>West Once More</li><li>South Once More</li><li>East Again</li><li>West Again</li>";
    break;
  case "South":
    switch(window.prompt("Do you want to explore?")){
      case "yes":
        console.log("user wants to explore")
        break;
      case "no":
        console.log("user does not want to explor")
        break;
    }
  break
}

`prompt` is pretty user-unfriendly - I'm pretty sure OP wants to be able to continue using the input box he's created. — CertainPerformance, Apr 07 '20 at 02:56
Thanks for the response! Unfortunately, when I tried the code out, it didn't really work. — The.Epistemophile.Bibliophile, Apr 07 '20 at 17:58

I want to add more options to my switch statements. Is there any way of achieving that?

2 Answers2