为什么else语句在if语句之后执行？

Question

我有一个带有一个文本输入的表单。当我按Enter键时，如果文本与if语句匹配，则运行一个函数。

＆＃13;

＆＃13;

fragment

＆＃13;

function command() {
 var input = document.getElementById("url").value;
 
 if (input == "/help"){
  alert("hi");
  help();
 }
 if (input == "/reset"){
  reset();
 }
 if (input == "/custom"){
  customSetting();
 }
 if (input == "/contact"){
  modal1.style.display = "block";
 }
 if (input == "/docs"){
  googleDocs();
 }
 else if (input == "/classroom"){
  googleClassroom();
 }
 else {
  alert("This command doesn't exist.");
 }
}

$(document).ready(function () {
  $('#command').attr('action', 'javascript:void(0);');
});

＆＃13;

＆＃13;

＆＃13;

问题是即使if语句为true，else语句也会运行。提前谢谢。

Answer 1

您应该使用else if：

＆＃13;

＆＃13;

function command() {
  var input = document.getElementById("url").value;

  if (input == "/help") {
    alert("hi");
    help();
  } else if (input == "/reset") {
    reset();
  } else if (input == "/custom") {
    customSetting();
  } else if (input == "/contact") {
    modal1.style.display = "block";
  } else if (input == "/docs") {
    googleDocs();
  } else if (input == "/classroom") {
    googleClassroom();
  } else {
    alert("This command doesn't exist.");
  }
}

$(document).ready(function() {
  $('#command').attr('action', 'javascript:void(0);');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form onsubmit="command()" id="command">
  <input type="text" id="url" class="form1">
  <input type="submit" style="visibility: hidden;">
</form>

＆＃13;

＆＃13;

＆＃13;

或者，请考虑使用switch：

＆＃13;

＆＃13;

function command() {
  var input = document.getElementById("url").value;

  switch (input) {
    case "/help":
      alert("hi");
      help();
      break;
    case "/reset":
      reset();
      break;
    case "/custom":
      customSetting();
      break;
    case "/contact":
      modal1.style.display = "block";
      break;
    case "/docs":
      googleDocs();
      break;
    case "/classroom":
      googleClassroom();
      break;
    default:
      alert("This command doesn't exist.");
  }
}

$(document).ready(function() {
  $('#command').attr('action', 'javascript:void(0);');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form onsubmit="command()" id="command">
  <input type="text" id="url" class="form1">
  <input type="submit" style="visibility: hidden;">
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 2

它有效，但提交的文本需要在它前面有一个“/”才能工作，你可以将“/”连接到你的输入，或只是检查没有“/".

的单词

例如，您可以使用：

var input  = '/' + document.getElementById("url").value;

或：

if (input == "help"){
  alert("hi");
  help();
 }
 if (input == "reset"){
  reset();
 }
 if (input == "custom"){
  customSetting();
 }
 if (input == "contact"){
  modal1.style.display = "block";
 }
 if (input == "docs"){
  googleDocs();
 }
 else if (input == "classroom"){
  googleClassroom();
 }
 else {
  alert("This command doesn't exist.");
 }

Answer 3

您可能会发现使用具有如此多情况的开关很有用。如果所有其他情况都为假，则default被命中，我认为这是else阻止的预期逻辑。

＆＃13;

＆＃13;

function command() {
  var input = document.getElementById("url").value;

  switch (input) {
    case "/help":
      return alert("hi");
    case "/reset":
      return alert("reset");
    default:
      return alert("This command doesn't exist.");
  }
}

$(document).ready(function() {
  $('#command').attr('action', 'javascript:void(0);');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form onsubmit="command()" id="command">
  <input type="text" id="url" class="form1">
  <input type="submit" style="visibility: hidden;">
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 4

每个案例相关条件必须只有一个'if'

function command() {
var input =             document.getElementById("url").value;

 if (input == "/help"){
      alert("hi");
      help();
 }
 else if (input == "/reset"){
      reset();
 }
 else if (input == "/custom"){
      customSetting();
 }
 else if (input == "/contact"){
      modal1.style.display = "block";
 }
  else if (
      input == "/docs"){
     googleDocs();
 }
  else if (input == "/classroom"){
     googleClassroom();
 }
  else {
     alert("This command doesn't exist.");
     }
 }

$(document).ready(function () {
  $(‘#command').attr('action',    ‘javascript:void(0);');
 });