我想为我的 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) => {&nbsp; button.onclick = () => {&nbsp; &nbsp; resolve(input.value.toLowerCase());&nbsp; };});const summary = document.querySelector('div');const display = text => summary.innerHTML = text;const main = async () => {&nbsp; const textInput = await nextInput();&nbsp; if (textInput === 'help1') {&nbsp; &nbsp; 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>");&nbsp; } else if (textInput === 'help2') {&nbsp; &nbsp; 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>");&nbsp; } else if (textInput === 'south') {&nbsp; &nbsp; display("You went to the city; street 2. Do you want to explore?");&nbsp; &nbsp; const exploring = await nextInput();&nbsp; &nbsp; if (exploring === 'yes') {&nbsp; &nbsp; &nbsp; display('Exploring');&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; display('Not exploring');&nbsp; &nbsp; }&nbsp; }&nbsp; // go back to beginning state&nbsp; main();};main();<input type="text" placeholder="Type 'Help1' for actions"><button>Confirm</button><div></div>

Answer 2

您可以嵌套另一个switch...case. 您只需要确保为答案分配了一个值，或者使用诸如 window.prompt 之类的东西来获得答案。例如：switch (textInput) {&nbsp; case "Help1":&nbsp; &nbsp; 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>""&nbsp; &nbsp; break;&nbsp; case "Help2":&nbsp; &nbsp; 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>";&nbsp; &nbsp; break;&nbsp; case "South":&nbsp; &nbsp; switch(window.prompt("Do you want to explore?")){&nbsp; &nbsp; &nbsp; case "yes":&nbsp; &nbsp; &nbsp; &nbsp; console.log("user wants to explore")&nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; case "no":&nbsp; &nbsp; &nbsp; &nbsp; console.log("user does not want to explor")&nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; }&nbsp; break}