Javascript - 从一个 switch 语句案例到另一个 switch 语句答案

【问题标题】：Javascript - Going from one switch statement case to a different switch statementJavascript - 从一个 switch 语句案例到另一个 switch 语句
【发布时间】：2018-09-30 18:08:12
【问题描述】：

我试图让 switch 语句中的 case 跳转到不同的 switch 语句。

实际上，我希望用户在文本框中键入“关闭页面”，并且在浏览器关闭页面之前，我希望询问用户是否确定。键入“yes”将关闭页面，键入“no”将返回上一个 switch 语句。

我需要使用 switch 语句，因为用户可以在文本框中输入许多其他内容，从而产生不同的反馈。

我为每个 switch 语句使用不同的文本框，必要时交换它们，以尝试能够使用相同的键调用这两个函数。

这就是我所拥有的。但它不起作用...... 有什么帮助吗？

        function SwapDivs(div1, div2) {
            d1 = document.getElementById(div1);
            d2 = document.getElementById(div2);
            if (d2.style.display == "none") {
                d1.style.display = "none";
                d2.style.display = "block";
            } else {
                d1.style.display = "block";
                d2.style.display = "none";
            }
        }

        function myFunction01() {
            var text;
            var answers = document.getElementById("myInput01"").value;
            switch (answers) {
                case "close page":
                    text = "are you sure?";
                    SwapDivs('div01', 'div02');
                    break;
                default:
                    text = "no valid input";
            }
            document.getElementById("feedback").innerHTML = text;
        }

        function myFunction02() {
            var text;
            var answers = document.getElementById("myInput02").value;
            switch (answers) {
                case "yes":
                    text = "Why?";
                    break;
                case "no":
                    text = "Good!";
                    break;
                default:
                    text = "no valid input";
            }
            document.getElementById("feedback").innerHTML = text;
        }

    <p id="feedback"></p>

    <div id="div01" style="display:block">
        <input id="myInput01" type="text" placeholder="This is TextBox 01." onKeyDown="if(event.keyCode==13) myFunction01();">
    </div>

    <div id="div02" style="display:none">
        <input id="myInput02" type="text" placeholder="This is TextBox 02." onKeyDown="if(event.keyCode==13) myFunction02();">
    </div>

【问题讨论】：

标签： javascript switch-statement swap

【解决方案1】：

你的第一个函数有一个额外的引用：

var answers = document.getElementById("myInput01"").value;

应该是：

var answers = document.getElementById("myInput01").value;

我理解的行为是：

如果用户输入“关闭页面”以外的任何文本，我们会向他们反馈无效输入。
- 如果用户输入“关闭页面”，我们会询问他们是否确定并更改为输入 2。
- 在输入 2 上，如果他们输入是，我们说为什么，如果他们输入不是，我们说好，否则说没有有效输入。

如果这是预期的，代码对我有用。

你可以在下面运行这个（转换为 ES6）：

const SwapDivs = (div1, div2) => {
  const d1 = document.getElementById(div1);
  const d2 = document.getElementById(div2);
  if (d2.style.display == "none") {
    d1.style.display = "none";
    d2.style.display = "block";
  } else {
    d1.style.display = "block";
    d2.style.display = "none";
  }
};

const myFunction01 = () => {
  let text;
  const answers = document.getElementById("myInput01").value;
  switch (answers) {
    case "close page":
      text = "are you sure?";
      SwapDivs('div01', 'div02');
      break;
    default:
      text = "no valid input";
  }
  document.getElementById("feedback").innerHTML = text;
};

const myFunction02 = () => {
  let text;
  const answers = document.getElementById("myInput02").value;
  switch (answers) {
    case "yes":
      text = "Why?";
      break;
    case "no":
      text = "Good!";
      break;
    default:
      text = "no valid input";
  }
  document.getElementById("feedback").innerHTML = text;
};

<p id="feedback"></p>

    <div id="div01" style="display:block">
        <input id="myInput01" type="text" placeholder="This is TextBox 01." onKeyDown="if(event.keyCode==13) myFunction01();">
    </div>

    <div id="div02" style="display:none">
        <input id="myInput02" type="text" placeholder="This is TextBox 02." onKeyDown="if(event.keyCode==13) myFunction02();">
    </div>

【讨论】：