我想在我的switch语句中添加更多选项。有什么方法可以实现？

Question

我有此代码：

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

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;

现在说，我想补充我对南方的看法。如您所见，这里有一个问题（请注意：在此之后还有其他情况）。我想添加诸如是或否之类的内容，如果输入“是”，它会给我类似“您玩得开心”的信息。而且没有给我，“您决定不探索南大街2。

反正有做这样的事情吗？我尝试开始其他案件，但没有解决。案例中的if和if语句均不这样做。任何反馈将不胜感激。

Answer 1

听起来[text正在插入DOM，并且用户必须在逻辑继续之前输入另一个输入。附加值的此输入是异步的。表示链接的异步代码流的最清晰方法是使用async / await：您可以使函数返回一个Promise，该Promise在用户按下按钮时进行解析。每当您想实现询问用户的逻辑时，都调用它并await Promise。

[switch非常丑陋且冗长，请考虑使用普通的if / else语句。

也考虑使用小写的输入文本，这会使用户更轻松一些。

avoid inline handlers也很好，他们有太多问题。而是使用JavaScript附加监听器。

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>

Answer 2

您可以嵌套另一个switch...case。您只需要确保为答案分配了一个值，或使用诸如window.prompt之类的方法即可获得答案。

例如：

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
}