Я хочу добавить больше опций в свои операторы переключения. Есть ли способ достичь этого? - PullRequest
Новая
       6

Я хочу добавить больше опций в свои операторы переключения. Есть ли способ достичь этого?

0 голосов
/ 07 апреля 2020

У меня есть этот код: 

<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 Внутри корпуса. Любая обратная связь будет принята с благодарностью.

Ответы [ 2 ]

1 голос
/ 07 апреля 2020

Звучит так, как будто text вставляется в DOM, и пользователь должен ввести еще один ввод, прежде чем лог c продолжится. Этот ввод дополнительных значений является асинхронным. Самый простой способ express цепочки асинхронного потока кода - с помощью async / await: вы можете создать функцию, которая возвращает Promise, который разрешается, когда пользователь нажимает кнопку. Всякий раз, когда вы хотите реализовать logi c для запроса пользователя, вызывайте его и await Обещание.

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>
0 голосов
/ 07 апреля 2020

Вы можете вложить другое 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
}
...