我想为我的 switch 语句添加更多选项。有没有办法做到这一点？

Question

我有这个代码：<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>现在说我想补充一下我对南方的看法。如您所见，有一个问题（请注意：在此之后还有其他情况）。我想添加类似“是”或“否”之类的内容，如果我输入“是”，它会给我类似“你玩得开心”之类的内容。也不给我，“你决定不去探索南街 2 号。有没有做这样的事情？我尝试开始另一个案例，但没有成功。案例中的 if 和 else if 语句也不做。任何反馈将不胜感激。

Answer 1

听起来好像text正在被插入到 DOM 中，并且用户必须在逻辑继续之前输入另一个输入。这种附加值的输入是异步的。表达链式异步代码流的最清晰方法是使用async/ await：您可以创建一个返回 Promise 的函数，该 Promise 在用户按下按钮时解析。每当你想实现询问用户的逻辑时，调用它和awaitPromise。

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

还要考虑小写输入文本，它会让用户更轻松。

避免内联处理程序也很好，它们有太多问题。改为使用 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

}