CODEWITHSUNDEEP
javascripthtml
Blackmagyk
Blackmagyk

Reputation: 80

Why does the else statement execute after the if statement?

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.

Upvotes: 0

Views: 104

Answers (4)

Lucifer Rodstark
Lucifer Rodstark

Reputation: 216

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

Upvotes: 1

alan morano
alan morano

Reputation: 13

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.");
 }

Upvotes: 1

vapurrmaid
vapurrmaid

Reputation: 2307

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>

Upvotes: 1

Racil Hilan
Racil Hilan

Reputation: 25351

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>

Upvotes: 2

Related Questions