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

Question

I have a form with one text input. When I press enter, if the text matches the if statements, then a function runs.

 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);'); }); 

 <form onsubmit="command()" id="command"> <input type="text" id="url" class="form1"> <input type="submit" style="visibility: hidden;"> </form> 

The problem is that the else statement runs even if the if statement is true. Thanks in advance.

Answer 1

You should use else 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);'); }); 

 <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> 

Alternatively, consider using switch :

 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);'); }); 

 <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> 

Answer 2

it works but the text submitted needs to have a "/" in front of it to work, you can concatenate a "/" to your input, or just check for the word without the "/".

For example, you could use:

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

or:

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

You may find it useful to use a switch with so many cases. default is hit if all other cases are false, which I think was was your intended logic for the else block.

 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);'); }); 

 <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> 

Answer 4

There must be only one 'if' for every single case related conditions

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);');
 });